From 71c7ba2acfef38f2b4e3e0b550dfa544b2858b9f Mon Sep 17 00:00:00 2001 From: Dan Barber Date: Mon, 25 Mar 2024 21:09:13 -0500 Subject: [PATCH] Move tag handling over to turbo frames --- app/assets/config/manifest.js | 2 ++ app/controllers/images_controller.rb | 7 ++++ app/controllers/tags_controller.rb | 4 +-- app/javascript/application.js | 7 ++++ app/javascript/controllers/tag_controller.js | 22 ------------- app/javascript/controllers/tags_controller.js | 20 ------------ app/javascript/packs/application.js | 18 ----------- app/javascript/services/ajax_service.js | 32 ------------------- app/views/images/_info.html.erb | 10 +++--- app/views/layouts/application.html.erb | 2 +- app/views/tags/_tag.html.erb | 4 +-- app/views/tags/_tags.html.erb | 12 ++++--- app/views/tags/index.js.erb | 4 --- bin/importmap | 4 +++ config/importmap.rb | 8 +++++ 15 files changed, 46 insertions(+), 110 deletions(-) create mode 100644 app/javascript/application.js delete mode 100644 app/javascript/controllers/tag_controller.js delete mode 100644 app/javascript/controllers/tags_controller.js delete mode 100644 app/javascript/packs/application.js delete mode 100644 app/javascript/services/ajax_service.js delete mode 100644 app/views/tags/index.js.erb create mode 100755 bin/importmap create mode 100644 config/importmap.rb diff --git a/app/assets/config/manifest.js b/app/assets/config/manifest.js index 5918193..ddd546a 100644 --- a/app/assets/config/manifest.js +++ b/app/assets/config/manifest.js @@ -1,2 +1,4 @@ //= link_tree ../images //= link_directory ../stylesheets .css +//= link_tree ../../javascript .js +//= link_tree ../../../vendor/javascript .js diff --git a/app/controllers/images_controller.rb b/app/controllers/images_controller.rb index 4ca0ce2..834ebc5 100644 --- a/app/controllers/images_controller.rb +++ b/app/controllers/images_controller.rb @@ -8,6 +8,13 @@ class ImagesController < ApplicationController def show @image = @current_user.images.find(params[:id]) + + if turbo_frame_request? + render partial: "tags/tags", locals: { + image: @image, + tags: @image.tags + } + end end def create diff --git a/app/controllers/tags_controller.rb b/app/controllers/tags_controller.rb index 89bc752..9abe2d8 100644 --- a/app/controllers/tags_controller.rb +++ b/app/controllers/tags_controller.rb @@ -8,7 +8,7 @@ class TagsController < ApplicationController if !image.tags.include?(tag) image.tags << tag image.save - render partial: "tags/tag", locals: { image: image, tag: tag } + redirect_to image, turbo_frame: "tags" else head :no_content, content_type: "text/html" end @@ -20,6 +20,6 @@ class TagsController < ApplicationController image.tags.delete(tag) image.save - head :no_content + redirect_to image, turbo_frame: "tags" end end diff --git a/app/javascript/application.js b/app/javascript/application.js new file mode 100644 index 0000000..b62af4a --- /dev/null +++ b/app/javascript/application.js @@ -0,0 +1,7 @@ +// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails + +import "@hotwired/turbo-rails" +import Rails from "@rails/ujs"; +import { Application } from "@hotwired/stimulus"; + +Rails.start(); diff --git a/app/javascript/controllers/tag_controller.js b/app/javascript/controllers/tag_controller.js deleted file mode 100644 index eecb056..0000000 --- a/app/javascript/controllers/tag_controller.js +++ /dev/null @@ -1,22 +0,0 @@ -import { Controller } from "stimulus"; -import ajaxService from "../services/ajax_service"; - -export default class extends Controller { - static targets = ["name"]; - - delete(event) { - const tag = this.nameTarget.innerText; - - event.preventDefault(); - - this.element.classList.add("hidden"); - - ajaxService.deleteTag(tag) - .then(response => { - this.element.parentElement.removeChild(this.element); - }) - .catch(error => { - this.element.classList.remove("hidden") - }); - } -} diff --git a/app/javascript/controllers/tags_controller.js b/app/javascript/controllers/tags_controller.js deleted file mode 100644 index 291c6fc..0000000 --- a/app/javascript/controllers/tags_controller.js +++ /dev/null @@ -1,20 +0,0 @@ -import { Controller } from "stimulus"; -import ajaxService from "../services/ajax_service"; - -export default class extends Controller { - static targets = ["tag", "tagList"] - - create(event) { - const tag = this.tagTarget.value; - - event.preventDefault(); - - ajaxService.createTag(tag) - .then(response => { - if (response.status == 200) { - this.tagListTarget.innerHTML += response.data; - this.tagTarget.value = ""; - }; - }) - } -} diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js deleted file mode 100644 index 7c49ac0..0000000 --- a/app/javascript/packs/application.js +++ /dev/null @@ -1,18 +0,0 @@ -/* eslint no-console:0 */ -// This file is automatically compiled by Webpack, along with any other files -// present in this directory. You're encouraged to place your actual application logic in -// a relevant structure within app/javascript and only use these pack files to reference -// that code so it'll be compiled. -// -// To reference this file, add <%= javascript_pack_tag 'application' %> to the appropriate -// layout file, like app/views/layouts/application.html.erb - -import Rails from "rails-ujs"; -import { Application } from "stimulus"; -import { definitionsFromContext } from "stimulus/webpack-helpers"; - -Rails.start(); - -const application = Application.start(); -const context = require.context("controllers", true, /.js$/); -application.load(definitionsFromContext(context)); diff --git a/app/javascript/services/ajax_service.js b/app/javascript/services/ajax_service.js deleted file mode 100644 index 2a1352d..0000000 --- a/app/javascript/services/ajax_service.js +++ /dev/null @@ -1,32 +0,0 @@ -import axios from "axios"; - -const csrfToken = () => { - return document - .getElementsByName("csrf-token")[0] - .attributes["content"] - .value; -} - -const imageId = () => { - return document - .getElementsByClassName("show-image")[0] - .attributes["data-image-id"] - .value; -} - -const config = () => ({ - headers: { "X-CSRF-Token": csrfToken() } -}); - -export default { - createTag: (tag) => { - return axios.post(`/images/${imageId()}/tags`, { tag }, config()); - }, - - deleteTag: (tag) => { - return axios.delete( - `/images/${imageId()}/tags/${encodeURIComponent(tag)}`, - config() - ); - } -} diff --git a/app/views/images/_info.html.erb b/app/views/images/_info.html.erb index fb3e99e..665734c 100644 --- a/app/views/images/_info.html.erb +++ b/app/views/images/_info.html.erb @@ -3,11 +3,13 @@ <%= render "tags/tags", image: image, tags: image.tags %>
- <%= form_tag image_tags_path(image), + <%= form_tag( + image_tags_path(image), method: :post, - data: { action: "tags#create" } do %> - <%= text_field_tag :tag, nil, data: { target: "tags.tag" } %> - <%= submit_tag "Add Tag", data: { disable_with: false } %> + data: {"turbo-frame": "tags"} + ) do %> + <%= text_field_tag :tag, nil %> + <%= submit_tag "Add Tag" %> <% end %>
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb index f627d95..7b5e753 100644 --- a/app/views/layouts/application.html.erb +++ b/app/views/layouts/application.html.erb @@ -4,8 +4,8 @@ My Images <%= stylesheet_link_tag "application", media: "all" %> - <%= javascript_pack_tag "application" %> <%= csrf_meta_tags %> + <%= javascript_importmap_tags %> diff --git a/app/views/tags/_tag.html.erb b/app/views/tags/_tag.html.erb index 28ad3a3..3b0b641 100644 --- a/app/views/tags/_tag.html.erb +++ b/app/views/tags/_tag.html.erb @@ -3,7 +3,7 @@ data-controller="tag"> <%= tag %> <%= link_to "×".html_safe, - image_tag_path(image, tag), - data: { action: "click->tag#delete" }, + image_tag_path(image, id: tag), + data: {method: "delete", "turbo-frame": "tags"}, class: "delete-tag" %> diff --git a/app/views/tags/_tags.html.erb b/app/views/tags/_tags.html.erb index 14d52a7..6999504 100644 --- a/app/views/tags/_tags.html.erb +++ b/app/views/tags/_tags.html.erb @@ -1,5 +1,7 @@ - +<%= turbo_frame_tag "tags" do %> + +<% end %> diff --git a/app/views/tags/index.js.erb b/app/views/tags/index.js.erb deleted file mode 100644 index 3d26a8e..0000000 --- a/app/views/tags/index.js.erb +++ /dev/null @@ -1,4 +0,0 @@ -document.getElementById("tag").value = ""; - -document.getElementById("image-tags") - .outerHTML = `<%= render "tags", image: image, tags: tags %>`; diff --git a/bin/importmap b/bin/importmap new file mode 100755 index 0000000..36502ab --- /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 0000000..920f51a --- /dev/null +++ b/config/importmap.rb @@ -0,0 +1,8 @@ +# Pin npm packages by running ./bin/importmap + +pin "application" +pin "@rails/ujs", to: "@rails--ujs.js" # @7.1.3 +pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2 +pin "@hotwired/turbo-rails", to: "@hotwired--turbo-rails.js" # @8.0.4 +pin "@hotwired/turbo", to: "@hotwired--turbo.js" # @8.0.4 +pin "@rails/actioncable/src", to: "@rails--actioncable--src.js" # @7.1.3