feat(#3713): add template search on GUI

web/src/lang/cs.js

@@ -208,6 +208,9 @@ export default {
   allowCliArgsInTask: 'Argumenty CLI',
   docs: 'dokumentaci',
   editViews: 'Upravit zobrazení',
+  searchTemplatesByName: 'Hledat šablony podle názvu...',
+  xOfYTemplates: '{x} z {y} šablon',
+  noTemplatesMatchSearch: 'Žádné šablony neodpovídají "{search}"',
   newTemplate: 'Nová šablona',
   taskTemplates2: 'Šablony úloh',
   all: 'Vše',

web/src/lang/de.js

@@ -212,6 +212,9 @@ export default {
   allowCliArgsInTask: 'CLI-Argumente',
   docs: 'Dokumentation',
   editViews: 'Ansichten bearbeiten',
+  searchTemplatesByName: 'Vorlagen nach Name suchen...',
+  xOfYTemplates: '{x} von {y} Vorlagen',
+  noTemplatesMatchSearch: 'Keine Vorlagen entsprechen "{search}"',
   newTemplate: 'Neue Vorlage',
   taskTemplates2: 'Task-Vorlagen',
   all: 'Alle',

web/src/lang/en.js

@@ -228,6 +228,9 @@ export default {
   allowCliArgsInTask: 'CLI args',
   docs: 'docs',
   editViews: 'Edit Views',
+  searchTemplatesByName: 'Search templates by name...',
+  xOfYTemplates: '{x} of {y} templates',
+  noTemplatesMatchSearch: 'No templates match "{search}"',
   newTemplate: 'New template',
   taskTemplates2: 'Task Templates',
   all: 'All',

web/src/lang/es.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Argumentos CLI',
   docs: 'documentos',
   editViews: 'Editar Vistas',
+  searchTemplatesByName: 'Buscar plantillas por nombre...',
+  xOfYTemplates: '{x} de {y} plantillas',
+  noTemplatesMatchSearch: 'No hay plantillas que coincidan con "{search}"',
   newTemplate: 'Nueva plantilla',
   taskTemplates2: 'Plantillas de Tareas',
   all: 'Todo',

web/src/lang/fr.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Arguments CLI',
   docs: 'docs',
   editViews: 'Modifier les vues',
+  searchTemplatesByName: 'Rechercher des modèles par nom...',
+  xOfYTemplates: '{x} sur {y} modèles',
+  noTemplatesMatchSearch: 'Aucun modèle ne correspond à "{search}"',
   newTemplate: 'Nouveau modèle',
   taskTemplates2: 'Modèles de tâches',
   all: 'Tous',

web/src/lang/it.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Argomenti CLI',
   docs: 'documenti',
   editViews: 'Modifica viste',
+  searchTemplatesByName: 'Cerca modelli per nome...',
+  xOfYTemplates: '{x} di {y} modelli',
+  noTemplatesMatchSearch: 'Nessun modello corrisponde a "{search}"',
   newTemplate: 'Nuovo modello',
   taskTemplates2: 'Modelli di compito',
   all: 'Tutti',

web/src/lang/ja.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'CLI引数',
   docs: 'ドキュメント',
   editViews: 'ビューを編集',
+  searchTemplatesByName: '名前でテンプレートを検索...',
+  xOfYTemplates: '{y}件中{x}件のテンプレート',
+  noTemplatesMatchSearch: '"{search}"に一致するテンプレートはありません',
   newTemplate: '新しいテンプレート',
   taskTemplates2: 'タスクテンプレート',
   all: 'すべて',

web/src/lang/ko.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'CLI 인수',
   docs: '문서',
   editViews: '보기 수정',
+  searchTemplatesByName: '이름으로 템플릿 검색...',
+  xOfYTemplates: '{y}개 중 {x}개 템플릿',
+  noTemplatesMatchSearch: '"{search}"와 일치하는 템플릿이 없습니다',
   newTemplate: '새 템플릿',
   taskTemplates2: '작업 템플릿',
   all: '모두',

web/src/lang/nl.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'CLI-argumenten',
   docs: 'documentatie',
   editViews: 'Weergaven Bewerken',
+  searchTemplatesByName: 'Zoek sjablonen op naam...',
+  xOfYTemplates: '{x} van {y} sjablonen',
+  noTemplatesMatchSearch: 'Geen sjablonen komen overeen met "{search}"',
   newTemplate: 'Nieuw sjabloon',
   taskTemplates2: 'Taak Sjablonen',
   all: 'Alle',

web/src/lang/pl.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Argumenty CLI',
   docs: 'dokumentacja',
   editViews: 'Edytuj widoki',
+  searchTemplatesByName: 'Szukaj szablonów według nazwy...',
+  xOfYTemplates: '{x} z {y} szablonów',
+  noTemplatesMatchSearch: 'Żadne szablony nie pasują do "{search}"',
   newTemplate: 'Nowy szablon',
   taskTemplates2: 'Szablony zadań',
   all: 'Wszystko',

web/src/lang/pt.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Argumentos CLI',
   docs: 'documentos',
   editViews: 'Editar Visualizações',
+  searchTemplatesByName: 'Pesquisar modelos por nome...',
+  xOfYTemplates: '{x} de {y} modelos',
+  noTemplatesMatchSearch: 'Nenhum modelo corresponde a "{search}"',
   newTemplate: 'Novo modelo',
   taskTemplates2: 'Modelos de Tarefa',
   all: 'Todos',

web/src/lang/pt_br.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'Argumentos CLI',
   docs: 'documentos',
   editViews: 'Editar Visualizações',
+  searchTemplatesByName: 'Pesquisar modelos por nome...',
+  xOfYTemplates: '{x} de {y} modelos',
+  noTemplatesMatchSearch: 'Nenhum modelo corresponde a "{search}"',
   newTemplate: 'Novo modelo',
   taskTemplates2: 'Modelos de Tarefa',
   all: 'Todos',

web/src/lang/ru.js

@@ -208,6 +208,9 @@ export default {
   allowCliArgsInTask: 'CLI аргументы',
   docs: 'документация',
   editViews: 'Редактировать представления',
+  searchTemplatesByName: 'Поиск шаблонов по имени...',
+  xOfYTemplates: '{x} из {y} шаблонов',
+  noTemplatesMatchSearch: 'Нет шаблонов, соответствующих "{search}"',
   newTemplate: 'Новый шаблон',
   taskTemplates2: 'Шаблоны задач',
   all: 'Все',

web/src/lang/uk.js

@@ -204,6 +204,9 @@ export default {
   allowCliArgsInTask: 'CLI-аргументи',
   docs: 'документація',
   editViews: 'Редагувати перегляди',
+  searchTemplatesByName: 'Пошук шаблонів за назвою...',
+  xOfYTemplates: '{x} з {y} шаблонів',
+  noTemplatesMatchSearch: 'Немає шаблонів, що відповідають "{search}"',
   newTemplate: 'Новий шаблон',
   taskTemplates2: 'Шаблони завдань',
   all: 'Усі',

web/src/lang/zh_cn.js

@@ -203,6 +203,9 @@ export default {
   allowCliArgsInTask: 'CLI 参数',
   docs: '文档',
   editViews: '编辑视图',
+  searchTemplatesByName: '按名称搜索模板...',
+  xOfYTemplates: '{y} 个模板中的 {x} 个',
+  noTemplatesMatchSearch: '没有与"{search}"匹配的模板',
   newTemplate: '新模板',
   taskTemplates2: '任务模板',
   all: '所有',

web/src/lang/zh_tw.js

@@ -205,6 +205,9 @@ export default {
   allowCliArgsInTask: 'CLI 參數',
   docs: '文件',
   editViews: '編輯檢視',
+  searchTemplatesByName: '依名稱搜尋範本...',
+  xOfYTemplates: '{y} 個範本中的 {x} 個',
+  noTemplatesMatchSearch: '沒有符合"{search}"的範本',
   newTemplate: '新增範本',
   taskTemplates2: '任務範本',
   all: '所有',

web/src/views/project/Templates.vue

@@ -130,13 +130,39 @@
 
     <v-divider style="margin-top: -1px;"/>
 
+    <div class="d-flex align-center px-4 pt-4">
+      <v-text-field
+        v-model="search"
+        ref="searchField"
+        prepend-inner-icon="mdi-magnify"
+        :placeholder="$t('searchTemplatesByName')"
+        hide-details
+        dense
+        outlined
+        clearable
+        single-line
+        style="max-width: 380px;"
+      ></v-text-field>
+
+      <span
+        v-if="search"
+        class="ml-4"
+        style="color: gray; font-size: 14px;"
+      >
+        {{ $t('xOfYTemplates', { x: filteredItems.length, y: items.length }) }}
+      </span>
+    </div>
+
     <v-data-table
       hide-default-footer
       class="mt-4 templates-table"
       single-expand
       show-expand
       :headers="filteredHeaders"
       :items="items"
+      :search="search"
+      :custom-filter="filterByName"
+      :no-results-text="noResultsText"
       :items-per-page="Number.MAX_VALUE"
       :expanded.sync="openedItems"
       :style="{
@@ -311,6 +337,7 @@ export default {
       viewTab: null,
       apps: null,
       itemApp: '',
+      search: '',
     };
   },
 
@@ -330,6 +357,20 @@ export default {
       return this.items.find((x) => x.id === this.itemId);
     },
 
+    noResultsText() {
+      return this.$t('noTemplatesMatchSearch', { search: this.search || '' });
+    },
+
+    filteredItems() {
+      const query = (this.search || '').trim().toLowerCase();
+      if (query === '') {
+        return this.items || [];
+      }
+      return (this.items || []).filter(
+        (item) => (item.name || '').toLowerCase().includes(query),
+      );
+    },
+
     isLoaded() {
       return this.items
         && this.inventory
@@ -385,6 +426,15 @@ export default {
       return true;
     },
 
+    // Filter the templates table by name only (case-insensitive).
+    filterByName(value, search, item) {
+      const query = (search || '').trim().toLowerCase();
+      if (query === '') {
+        return true;
+      }
+      return (item.name || '').toLowerCase().includes(query);
+    },
+
     formatEnvironmentNames(item) {
       if (!Array.isArray(item.environment_ids) || item.environment_ids.length === 0) {
         return '—';