Add keybinds 'e' (edit), 'ctrl+esc' (cancel edit), 'ctrl+enter' (save…

… edit) and 's' || '/' (search)
svsticky · Feb 20, 2024 · e20a099 · e20a099
1 parent 0b94a01
commit e20a099
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 4 deletions.
diff --git a/app/javascript/src/admin/main.js b/app/javascript/src/admin/main.js
@@ -15,6 +15,20 @@ $(document).on("ready page:load turbolinks:load", function () {
     return confirm(I18n.t("admin.general.confirmation"));
   });
 
+  $(window)
+      .on('keydown', evt => {
+          if (evt.target.type === 'input') {
+              return;
+          }
+
+          // Select the search bar on '/'
+          if (evt.key === 's' || evt.key === '/') {
+              evt.preventDefault();
+
+              $("#search")?.focus();
+          }
+      })
+
   $(".page.search .input-group ul.dropdown-menu")
     .find("li")
     .on("mouseenter", function () {

diff --git a/app/javascript/src/admin/members.js b/app/javascript/src/admin/members.js
@@ -12,6 +12,30 @@ import { setup_intl_tel_input } from "../intl_tel_number";
 $(document).on("ready page:load turbolinks:load", function () {
   setup_intl_tel_input();
 
+  $(window)
+      .on('keydown', evt => {
+        if (evt.target.type === 'input') {
+          return;
+        }
+
+        // Click the edit button on the 'e' keypress
+        if (evt.key === 'e') {
+          // Do something
+          document.getElementById('member-btn-edit')?.click();
+          return;
+        }
+
+        // Cancel editing on Ctrl+Esc
+        if(evt.key === 'Escape' && evt.ctrlKey) {
+          document.getElementById('admin-member-edit-btn-cancel')?.click();
+        }
+
+        // Save editing user on ctrl+enter
+        if(evt.key === 'Enter' && evt.ctrlKey) {
+          document.getElementById("admin-member-edit-btn-save")?.click();
+        }
+      })
+
   $(".education label a.close").bind("click", function () {
     var row = $(".education .copyable:last")
       .clone()

diff --git a/app/views/admin/members/edit.html.haml b/app/views/admin/members/edit.html.haml
@@ -135,6 +135,6 @@
         .col-md-12
           .card
             .card-body
-              %button.btn.btn-success{type: 'submit'}= I18n.t('editing.save')
-              = link_to I18n.t('editing.cancel'), member_path, { :class => 'button btn btn-default' }
+              %button.btn.btn-success#admin-member-edit-btn-save{type: 'submit'}= I18n.t('editing.save')
+              = link_to I18n.t('editing.cancel'), member_path, { :class => 'button btn btn-default', :id => "admin-member-edit-btn-cancel" }
               = link_to I18n.t('editing.delete'), member_path(@member.id), { :class => 'button btn btn-danger float-right', 'data-method' => :delete }
diff --git a/app/views/admin/members/show.html.haml b/app/views/admin/members/show.html.haml
@@ -112,7 +112,7 @@
           .card-body
             .btn-group
               = link_to I18n.t('editing.cancel'), :back, { :class => 'btn btn-primary' }
-              = link_to I18n.t('editing.edit'), edit_member_path(@member.id), { :class => 'btn btn-warning' }
+              = link_to I18n.t('editing.edit'), edit_member_path(@member.id), { :class => 'btn btn-warning', :id => 'member-btn-edit' }
 
             .btn-group
               %button.btn.btn-primary.dropdown-toggle{ 'data-toggle' => 'dropdown', :type => 'button' }

diff --git a/app/views/layouts/partials/_search.html.haml b/app/views/layouts/partials/_search.html.haml
@@ -2,7 +2,7 @@
   %section.panel.panel-default
     .panel-body
       = form_tag members_path, :method => 'get' do
-        .input-group
+        .input-group#search-bar
           = search_field_tag :search, params[:search],  placeholder: I18n.t('layouts.partials.search.placeholder'), class: 'form-control', :autocomplete => 'off'
 
           %ul.dropdown-menu{ :name => 'studies' }