Replace repository autocompletes with stimulus controller

openSUSE · Dec 28, 2023 · 6f8de3f · 6f8de3f
1 parent 43c851d
commit 6f8de3f
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 6 deletions.
diff --git a/src/api/app/javascript/controllers/repository_autocomplete_controller.js b/src/api/app/javascript/controllers/repository_autocomplete_controller.js
@@ -0,0 +1,51 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = [ "select" ]
+  static values = { url: String }
+
+  connect() {
+    this.selectTarget.options.length = 0;
+    this.disableSelect();
+  }
+
+  disableSelect() {
+    this.selectTarget.setAttribute('disabled', '')
+  }
+
+  enableSelect() {
+    this.selectTarget.removeAttribute('disabled')
+  }
+
+  emptySelect() {
+    this.setSelect([]);
+  }
+
+  setSelect(results) {
+    this.selectTarget.options.length = 0;
+    if (results.length < 1)
+      return this.disableSelect();
+    results.forEach((result, key) => {
+      this.selectTarget[key] = new Option(result, result)
+    });
+    this.enableSelect();
+  }
+
+  async setRepositories(event) {
+    let url = new URL(this.urlValue, window.location.origin);
+    url.searchParams.set('project', event.detail);
+
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+      const data = await response.text();
+      this.setSelect(JSON.parse(data));
+    } catch {
+      console.error("Failed to return results");
+    }
+  }
+}
diff --git a/src/api/app/views/webui/repositories/_add_repository_from_project_modal.html.haml b/src/api/app/views/webui/repositories/_add_repository_from_project_modal.html.haml
@@ -1,10 +1,13 @@
-.modal.fade#add-repository-from-project{ tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repo_from_project', hidden: 'true' } }
+.modal.fade#add-repository-from-project{ tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repo_from_project', hidden: 'true' },
+                                         data: { controller: 'repository-autocomplete',
+                                                 'repository-autocomplete-url-value': autocomplete_repositories_path } }
   .modal-dialog.modal-dialog-centered{ role: 'document' }
     .modal-content
       = form_tag(action: :create, project: project) do
         .modal-header
           %h5.modal-title Add Repository to #{project}
-        .modal-body.repository-autocomplete
+        .modal-body.repository-autocomplete{ 'data-action': 'autocomplete:setInput->repository-autocomplete#setRepositories \
+                                                             autocomplete:search->repository-autocomplete#emptySelect' }
           = render partial: 'webui/shared/autocomplete', locals: { html_id: 'target_project', label: '<strong>Project:</strong>'.html_safe,
                                                                    data: { source: autocomplete_projects_path } }
 
@@ -14,7 +17,7 @@
             = select_tag 'target_repo', options_for_select(['']), required: true,
                                                                   disabled: true,
                                                                   class: 'repository-dropdown form-select',
-                                                                  data: { source: autocomplete_repositories_path }
+                                                                  data: { 'repository-autocomplete-target': 'select' }
           .mb-3
             = label_tag :name do
               %strong Name:

diff --git a/src/api/app/views/webui/repositories/_add_repository_path_modal.html.haml b/src/api/app/views/webui/repositories/_add_repository_path_modal.html.haml
@@ -1,10 +1,13 @@
-.modal.fade{ id: "add-repository-path-#{repository.id}", tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repository_path', hidden: 'true' } }
+.modal.fade{ id: "add-repository-path-#{repository.id}", tabindex: -1, role: 'dialog', aria: { labelledby: 'add_repository_path', hidden: 'true' },
+             data: { controller: 'repository-autocomplete',
+                     'repository-autocomplete-url-value': autocomplete_repositories_path } }
   .modal-dialog.modal-dialog-centered{ role: 'document' }
     .modal-content
       = form_tag(action: :create, project: project) do
         .modal-header
           %h5.modal-title Add additional path to #{repository}
-        .modal-body.repository-autocomplete
+        .modal-body.repository-autocomplete{ 'data-action': 'autocomplete:setInput->repository-autocomplete#setRepositories \
+                                                             autocomplete:search->repository-autocomplete#emptySelect' }
           = render partial: 'webui/shared/autocomplete', locals: { html_id: 'target_project', label: '<strong>Project:</strong>'.html_safe,
                                                                    data: { source: autocomplete_projects_path } }
           .mb-3
@@ -13,7 +16,7 @@
             = select_tag 'target_repo', options_for_select(['']), required: true,
                                                                   disabled: true,
                                                                   class: 'repository-dropdown form-select',
-                                                                  data: { source: autocomplete_repositories_path }
+                                                                  data: { 'repository-autocomplete-target': 'select' }
           = hidden_field_tag :repository, repository
 
         .modal-footer