From 33d849227d79a944e3dd18ff961a464733180bcc Mon Sep 17 00:00:00 2001 From: Alvaro Sanchez Date: Tue, 25 Oct 2022 14:49:33 -0500 Subject: [PATCH 01/22] WIP: Enable and use import maps --- Gemfile | 2 + Gemfile.lock | 6 +- app/assets/config/manifest.js | 2 + app/assets/javascripts/application.js | 108 ------------------------- app/javascript/application.js | 2 + app/views/layouts/application.html.erb | 3 +- bin/importmap | 4 + config/importmap.rb | 3 + vendor/javascript/.keep | 0 9 files changed, 20 insertions(+), 110 deletions(-) delete mode 100644 app/assets/javascripts/application.js create mode 100644 app/javascript/application.js create mode 100755 bin/importmap create mode 100644 config/importmap.rb create mode 100644 vendor/javascript/.keep diff --git a/Gemfile b/Gemfile index 78701398e5..ddb9d15bdc 100644 --- a/Gemfile +++ b/Gemfile @@ -213,3 +213,5 @@ end # Use Redis for Action Cable gem "redis", "~> 5.0" + +gem "importmap-rails", "~> 1.1" diff --git a/Gemfile.lock b/Gemfile.lock index f549c0ff6c..999b203fda 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -236,6 +236,9 @@ GEM image_processing (1.12.2) mini_magick (>= 4.9.5, < 5) ruby-vips (>= 2.0.17, < 3) + importmap-rails (1.1.5) + actionpack (>= 6.0.0) + railties (>= 6.0.0) jbuilder (2.11.5) actionview (>= 5.0.0) activesupport (>= 5.0.0) @@ -655,6 +658,7 @@ DEPENDENCIES httparty icalendar image_processing + importmap-rails (~> 1.1) jbuilder jquery-rails jquery-ui-rails @@ -711,4 +715,4 @@ RUBY VERSION ruby 3.1.2p20 BUNDLED WITH - 2.3.22 + 2.3.24 diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index b834408504..a6a0deab99 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -2,3 +2,5 @@ //= link_tree ../images //= link_directory ../javascripts .js //= link_directory ../stylesheets .css +//= link_tree ../../javascript .js +//= link_tree ../../../vendor/javascript .js diff --git a/app/assets/javascripts/application.js b/app/assets/javascripts/application.js deleted file mode 100644 index b2a12f9621..0000000000 --- a/app/assets/javascripts/application.js +++ /dev/null @@ -1,108 +0,0 @@ -// This is a manifest file that'll be compiled into application.js, which will include all the files -// listed below. -// -// Any JavaScript file within this directory, lib/assets/javascripts, vendor/assets/javascripts, -// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path. -// -// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the -// compiled file. JavaScript code in this file should be added after the last require_* statement. -// -// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details -// about supported directives. -// -//= require rails-ujs -//= require jquery -//= require popper -//= require bootstrap -//= require bootstrap-select -// require jquery_ujs -//= require filterrific/filterrific-jquery -//= require bootstrap/alert -//= require adminlte.min -//= require cocoon -//= require quagga -//= require_tree . - -window.setTimeout(function() { - // When the user is given an error message, we should not auto-hide it so that - // they can fully read it and potentially copy/paste it into an issue. - $(".alert").not(".error").fadeTo(1000, 0).slideUp(1000, function() { - $(this).remove(); - }); -}, 2500); - -$(document).ready(function() { - Filterrific.init(); -}); - -function order_by_occurrence(arr) { - var counts = {}; - arr.forEach(function (value) { - if (!counts[value]) { - counts[value] = 0; - } - counts[value]++; - }); - - return Object.keys(counts).sort(function (curKey, nextKey) { - return counts[curKey] < counts[nextKey]; - }); -} - -function load_quagga() { - if ($('#barcode-scanner').length > 0 && navigator.mediaDevices && typeof navigator.mediaDevices.getUserMedia === 'function') { - - var last_result = []; - if (Quagga.initialized == undefined) { - Quagga.onDetected(function (result) { - var last_code = result.codeResult.code; - last_result.push(last_code); - if (last_result.length > 20) { - code = order_by_occurrence(last_result)[0]; - last_result = []; - Quagga.stop(); - $.ajax({ - type: "POST", - url: '/products/get_barcode', - data: { upc: code } - }); - } - }); - } - - Quagga.init({ - inputStream: { - name: "Live", - type: "LiveStream", - numOfWorkers: navigator.hardwareConcurrency, - target: document.querySelector('#barcode-scanner') - }, - decoder: { - readers: ['ean_reader', 'ean_8_reader', 'code_39_reader', 'code_39_vin_reader', 'codabar_reader', 'upc_reader', 'upc_e_reader'] - } - }, function (err) { - if (err) { console.log(err); return } - Quagga.initialized = true; - Quagga.start(); - }); - - } -}; -$(document).on('turbolinks:load', load_quagga); - -/** - * Handle loading on specified tab in the URL parameter. In case we would like - * to direct a user to a specific tab on a page rather than the default. - */ - -$(document).ready(function () { - var hash = location.hash.replace(/^#/, ''); // ^ means starting, meaning only match the first hash - if (hash) { - $('.nav-tabs a[href="#' + hash + '"]').tab('show'); - } - - // Change hash for page-reload - $('.nav-tabs a').on('shown.bs.tab', function (e) { - window.location.hash = e.target.hash; - }) -}) diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 0000000000..25c8fc2845 --- /dev/null +++ b/app/javascript/application.js @@ -0,0 +1,2 @@ +// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails +console.log("Hello from importmap-rails!") diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index cdb3b3d367..718a97a450 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -9,7 +9,8 @@ <%= javascript_include_tag 'application' %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= raw fullstory_script(current_user: current_user) if Rails.env.production? %> - <%= javascript_pack_tag 'application' %> + <%# javascript_pack_tag 'application' %> + <%= javascript_importmap_tags %> <%= stylesheet_pack_tag 'application' %> diff --git a/bin/importmap b/bin/importmap new file mode 100755 index 0000000000..36502ab16c --- /dev/null +++ b/bin/importmap @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby + +require_relative "../config/application" +require "importmap/commands" diff --git a/config/importmap.rb b/config/importmap.rb new file mode 100644 index 0000000000..9d8498523e --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1,3 @@ +# Pin npm packages by running ./bin/importmap + +pin "application", preload: true diff --git a/vendor/javascript/.keep b/vendor/javascript/.keep new file mode 100644 index 0000000000..e69de29bb2 From e0e2e7884e418afa5b5ee3b301db8519ac8b4769 Mon Sep 17 00:00:00 2001 From: Edwin Date: Thu, 27 Oct 2022 09:48:42 -0500 Subject: [PATCH 02/22] Fix issue sidenav with nested options not opening --- app/javascript/application.js | 7 +++++++ config/importmap.rb | 1 + 2 files changed, 8 insertions(+) diff --git a/app/javascript/application.js b/app/javascript/application.js index 25c8fc2845..52900519f3 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -1,2 +1,9 @@ // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails + +/** + * Load all javascript needed to run the AdminLTE theme and + * all the interactions. + */ +import 'admin-lte' + console.log("Hello from importmap-rails!") diff --git a/config/importmap.rb b/config/importmap.rb index 9d8498523e..240f0f815d 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -1,3 +1,4 @@ # Pin npm packages by running ./bin/importmap pin "application", preload: true +pin "admin-lte", to: "https://ga.jspm.io/npm:admin-lte@3.2.0/dist/js/adminlte.min.js" From f09e67861fef77123fea7fd0060bfa0cb26e1e45 Mon Sep 17 00:00:00 2001 From: Edwin Date: Thu, 27 Oct 2022 20:52:23 -0500 Subject: [PATCH 03/22] Fix issue in which line items UI supported by cocoon was not working --- app/javascript/application.js | 5 +++++ config/importmap.rb | 2 ++ 2 files changed, 7 insertions(+) diff --git a/app/javascript/application.js b/app/javascript/application.js index 52900519f3..497ca7c0fd 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -4,6 +4,11 @@ * Load all javascript needed to run the AdminLTE theme and * all the interactions. */ +import jQuery from 'jquery' +window.jQuery = jQuery +window.$ = jQuery + import 'admin-lte' +import "@oddcamp/cocoon-vanilla-js"; console.log("Hello from importmap-rails!") diff --git a/config/importmap.rb b/config/importmap.rb index 240f0f815d..4b2b1bd592 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -2,3 +2,5 @@ pin "application", preload: true pin "admin-lte", to: "https://ga.jspm.io/npm:admin-lte@3.2.0/dist/js/adminlte.min.js" +pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.1/dist/jquery.js", preload: true +pin "@oddcamp/cocoon-vanilla-js", to: "https://ga.jspm.io/npm:@oddcamp/cocoon-vanilla-js@1.1.3/index.js" From fa0582e95580af758326c5a1150c140fe4c4179a Mon Sep 17 00:00:00 2001 From: Edwin Date: Fri, 28 Oct 2022 13:38:16 -0500 Subject: [PATCH 04/22] Migrate turbo from webpack to importmaps --- app/javascript/application.js | 10 ++++++++-- app/javascript/packs/application.js | 5 ----- app/views/layouts/application.html.erb | 2 +- config/importmap.rb | 3 +++ package.json | 1 - 5 files changed, 12 insertions(+), 9 deletions(-) diff --git a/app/javascript/application.js b/app/javascript/application.js index 497ca7c0fd..ea2986aa6a 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -5,10 +5,16 @@ * all the interactions. */ import jQuery from 'jquery' +import 'admin-lte' +import "@oddcamp/cocoon-vanilla-js"; +import { Turbo } from "@hotwired/turbo-rails" + window.jQuery = jQuery window.$ = jQuery -import 'admin-lte' -import "@oddcamp/cocoon-vanilla-js"; +// Disable turbo by default to avoid issues with turbolinks +Turbo.session.drive = false console.log("Hello from importmap-rails!") + + diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js index 6e7bc1b663..db7b379d76 100644 --- a/app/javascript/packs/application.js +++ b/app/javascript/packs/application.js @@ -7,11 +7,6 @@ // To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate // layout file, like app/views/layouts/application.html.erb -import { Turbo } from "@hotwired/turbo-rails" - -// Disable turbo by default to avoid issues with turbolinks -Turbo.session.drive = false - import "../controllers/index" import "trix" import "@rails/actiontext" diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index 718a97a450..2c222b8f50 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -6,7 +6,7 @@ <%= content_for?(:title) ? yield(:title) : default_title_content %> <%= csrf_meta_tags %> - <%= javascript_include_tag 'application' %> + <%# javascript_include_tag 'application' %> <%= stylesheet_link_tag 'application', media: 'all' %> <%= raw fullstory_script(current_user: current_user) if Rails.env.production? %> <%# javascript_pack_tag 'application' %> diff --git a/config/importmap.rb b/config/importmap.rb index 4b2b1bd592..aa7093d5a2 100644 --- a/config/importmap.rb +++ b/config/importmap.rb @@ -1,6 +1,9 @@ # Pin npm packages by running ./bin/importmap pin "application", preload: true +pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true +pin "@hotwired/stimulus", to: "https://ga.jspm.io/npm:@hotwired/stimulus@3.1.0/dist/stimulus.js" +pin_all_from "app/javascript/controllers", under: "controllers" pin "admin-lte", to: "https://ga.jspm.io/npm:admin-lte@3.2.0/dist/js/adminlte.min.js" pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.6.1/dist/jquery.js", preload: true pin "@oddcamp/cocoon-vanilla-js", to: "https://ga.jspm.io/npm:@oddcamp/cocoon-vanilla-js@1.1.3/index.js" diff --git a/package.json b/package.json index 1439986a41..a3d87c344e 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,6 @@ "@fullcalendar/luxon": "^5.11.0", "@hotwired/stimulus": "^3.1.0", "@hotwired/stimulus-webpack-helpers": "^1.0.1", - "@hotwired/turbo-rails": "^7.1.3", "@rails/actiontext": "^7.0.2", "@rails/webpacker": "5.4.3", "actiontext": "https://github.com/rails/actiontext#archive", From cf854cabcf25201b4bb8012ad10f59a36de891c2 Mon Sep 17 00:00:00 2001 From: Edwin Date: Sat, 29 Oct 2022 16:02:24 -0500 Subject: [PATCH 05/22] Fix dropdown not working --- app/javascript/application.js | 2 ++ app/views/layouts/_lte_navbar.html.erb | 1 - config/importmap.rb | 4 +++- yarn.lock | 18 ------------------ 4 files changed, 5 insertions(+), 20 deletions(-) diff --git a/app/javascript/application.js b/app/javascript/application.js index ea2986aa6a..9c24cf7f12 100644 --- a/app/javascript/application.js +++ b/app/javascript/application.js @@ -9,6 +9,8 @@ import 'admin-lte' import "@oddcamp/cocoon-vanilla-js"; import { Turbo } from "@hotwired/turbo-rails" +import 'bootstrap' + window.jQuery = jQuery window.$ = jQuery diff --git a/app/views/layouts/_lte_navbar.html.erb b/app/views/layouts/_lte_navbar.html.erb index 71b0c6ae30..4d49dc0ded 100644 --- a/app/views/layouts/_lte_navbar.html.erb +++ b/app/views/layouts/_lte_navbar.html.erb @@ -58,7 +58,6 @@ <% end %> -