Adds a search field to the Task Templates page so users can filter templates in the current view.

web/src/lang/en.js

@@ -145,6 +145,7 @@ export default {
   title: 'Title *',
   description: 'Description',
   required: 'Required',
+  search: 'Search',
   key: '{expr}',
   surveyVariables: 'Survey Variables',
   addVariable: 'Add variable',

web/src/lang/es.js

@@ -129,6 +129,7 @@ export default {
   title: 'Título *',
   description: 'Descripción',
   required: 'Requerido',
+  search: 'Buscar',
   key: '{expr}',
   surveyVariables: 'Variables de Encuesta',
   addVariable: 'Agregar variable',

web/src/views/project/Templates.vue

@@ -51,6 +51,18 @@
       </v-toolbar-title>
       <v-spacer></v-spacer>
 
+      <v-text-field
+        v-model="search"
+        :label="$t('search')"
+        prepend-inner-icon="mdi-magnify"
+        clearable
+        hide-details
+        dense
+        outlined
+        single-line
+        class="templates-search mr-3"
+      />
+
       <v-menu
         offset-y
       >
@@ -136,7 +148,7 @@
       single-expand
       show-expand
       :headers="filteredHeaders"
-      :items="items"
+      :items="searchedItems"
       :items-per-page="Number.MAX_VALUE"
       :expanded.sync="openedItems"
       :style="{
@@ -257,6 +269,10 @@
   padding-right: 0 !important;
 }
 
+.templates-search {
+  max-width: 260px;
+}
+
 @media #{map-get($display-breakpoints, 'sm-and-down')} {
   .templates-table .v-data-table__mobile-row:first-child {
     display: none !important;
@@ -311,6 +327,7 @@ export default {
       viewTab: null,
       apps: null,
       itemApp: '',
+      search: '',
     };
   },
 
@@ -338,6 +355,15 @@ export default {
         && this.views
         && this.isAppsLoaded;
     },
+
+    searchedItems() {
+      const search = (this.search || '').trim().toLowerCase();
+      if (!search) {
+        return this.items;
+      }
+
+      return (this.items || []).filter((item) => this.getTemplateSearchText(item).includes(search));
+    },
   },
   watch: {
     async viewId() {
@@ -479,6 +505,25 @@ export default {
       this.newTaskDialog = true;
     },
 
+    getTemplateSearchText(item) {
+      const inventory = this.inventory?.find((x) => x.id === item.inventory_id)?.name || '';
+      const repository = this.repositories?.find((x) => x.id === item.repository_id)?.name || '';
+      const environments = Array.isArray(item.environment_ids)
+        ? item.environment_ids
+          .map((id) => this.environment?.find((x) => x.id === id)?.name || '')
+          .join(' ')
+        : '';
+
+      return [
+        item.name,
+        item.playbook,
+        item.description,
+        inventory,
+        repository,
+        environments,
+      ].filter(Boolean).join(' ').toLowerCase();
+    },
+
     getHeaders() {
       return [
         {