Skip to content

Commit

Permalink
Merge pull request #8440 from alphagov/refactor-uploaded_images_compo…
Browse files Browse the repository at this point in the history
…nent

Refactor UploadedImagesComponent
  • Loading branch information
davidgisbey authored Nov 2, 2023
2 parents 2c34131 + 6e3e9fb commit 05969b5
Show file tree
Hide file tree
Showing 13 changed files with 464 additions and 196 deletions.
28 changes: 28 additions & 0 deletions app/components/admin/edition_images/image_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<li class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<img src="<%= image.url %>" alt="<%= preview_alt_text %>" class="app-view-edition-resource__preview">
<% unless image.image_data&.all_asset_variants_uploaded? %>
<span class="govuk-tag govuk-tag--green">Processing</span>
<% end %>
</div>

<div class="govuk-grid-column-two-thirds">
<p class="govuk-body"><strong>Caption: </strong><%= caption %></p>
<p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p>
<%= render "govuk_publishing_components/components/copy_to_clipboard", {
label: tag.strong("Markdown code:"),
copyable_content: image_markdown,
button_text: "Copy Markdown",
} %>
</div>

<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
<% links.each do |link| %>
<%= link %>
<% end %>
</div>
</li>

<% unless last_image %>
<li aria-hidden="true"><hr class="app-view-edition-resource__section-break govuk-section-break govuk-section-break--visible"></li>
<% end %>
48 changes: 48 additions & 0 deletions app/components/admin/edition_images/image_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
# frozen_string_literal: true

class Admin::EditionImages::ImageComponent < ViewComponent::Base
def initialize(edition:, image:, last_image:)
@edition = edition
@image = image
@last_image = last_image
end

private

attr_reader :edition, :image, :last_image

def preview_alt_text
"Image #{find_index_from_non_lead_images + 1}"
end

def caption
image.caption.presence || "None"
end

def alt_text
image.alt_text.presence || "None"
end

def image_markdown
edition.images_have_unique_filenames? ? "[Image: #{image.filename}]" : "!!#{find_image_index + 1}"
end

def find_index_from_non_lead_images
if edition.respond_to?(:non_lead_images)
edition.non_lead_images.find_index(image)
else
edition.images.find_index(image)
end
end

def find_image_index
edition.images.find_index(image)
end

def links
links = []
links << link_to("Edit details", edit_admin_edition_image_path(@edition, image), class: "govuk-link")
links << link_to("Delete image", confirm_destroy_admin_edition_image_path(@edition, image), class: "govuk-link gem-link--destructive")
links
end
end
55 changes: 55 additions & 0 deletions app/components/admin/edition_images/lead_image_component.html.erb
Original file line number Diff line number Diff line change
@@ -0,0 +1,55 @@
<%= render "govuk_publishing_components/components/heading", {
text: "Lead image",
font_size: "m",
padding: true,
} %>

<%= render "govuk_publishing_components/components/details", {
title: "Using a lead image",
} do %>
<% lead_image_guidance %>
<% end %>

<% if lead_image.present? || case_study? %>
<div class="govuk-grid-row">
<% if lead_image.present? %>
<div class="app-c-edition-images-lead-image-component__lead_image">
<div class="govuk-grid-column-one-third">
<img src="<%= lead_image.url %>" alt="Lead image" class="app-view-edition-resource__preview">
<% unless lead_image.image_data&.all_asset_variants_uploaded? %>
<span class="govuk-tag govuk-tag--green">Processing</span>
<% end %>
</div>

<div class="govuk-grid-column-two-thirds">
<p class="govuk-body"><strong>Caption: </strong><%= caption %></p>
<p class="govuk-body"><strong>Alt text: </strong><%= alt_text %></p>
</div>
</div>
<% end %>

<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
<% if case_study? %>
<%= form_with(url: update_image_display_option_admin_edition_path(edition), method: :patch) do |form| %>
<%= hidden_field_tag "edition[image_display_option]", new_image_display_option %>

<%= render "govuk_publishing_components/components/button", {
text: update_image_display_option_button_text,
secondary_solid: true,
margin_bottom: 4,
} %>

<% if lead_image.present? %>
<% links.each do |link| %>
<%= link %>
<% end %>
<% end %>
<% end %>
<% elsif lead_image.present? %>
<% links.each do |link| %>
<%= link %>
<% end %>
<% end %>
</div>
</div>
<% end %>
86 changes: 86 additions & 0 deletions app/components/admin/edition_images/lead_image_component.rb
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
# frozen_string_literal: true

class Admin::EditionImages::LeadImageComponent < ViewComponent::Base
def initialize(edition:)
@edition = edition
end

def render?
edition.can_have_custom_lead_image?
end

private

attr_reader :edition

def lead_image_guidance
if case_study?
tag.p("Using a lead image is optional and can be shown or hidden. The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
else
tag.p("The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
end
end

def case_study?
edition.type == "CaseStudy"
end

def lead_image
@lead_image ||= edition.lead_image
end

def caption
lead_image.caption.presence || "None"
end

def alt_text
lead_image.alt_text.presence || "None"
end

def new_image_display_option
@new_image_display_option ||= if image_display_option_is_no_image? && edition_has_images?
"custom_image"
elsif image_display_option_is_no_image?
"organisation_image"
else
"no_image"
end
end

def image_display_option_is_no_image?
edition.image_display_option == "no_image"
end

def update_image_display_option_button_text
return image_display_option_button_text_when_image_has_been_uploaded if edition_has_images?

image_display_option_button_text_when_no_images_uploaded
end

def image_display_option_button_text_when_image_has_been_uploaded
return "Hide lead image" if new_image_display_option_is_no_image?

"Show lead image"
end

def image_display_option_button_text_when_no_images_uploaded
return "Remove lead image" if new_image_display_option_is_no_image?

"Use default image"
end

def new_image_display_option_is_no_image?
new_image_display_option == "no_image"
end

def edition_has_images?
edition.images.present?
end

def links
links = []
links << link_to("Edit details", edit_admin_edition_image_path(edition, lead_image), class: "govuk-link")
links << link_to("Delete image", confirm_destroy_admin_edition_image_path(edition, lead_image), class: "govuk-link gem-link--destructive")
links
end
end
Original file line number Diff line number Diff line change
Expand Up @@ -3,88 +3,23 @@
font_size: "l",
} %>

<% if can_have_lead_image? %>
<%= render "govuk_publishing_components/components/heading", {
text: "Lead image",
font_size: "m",
padding: true,
} %>

<%= render "govuk_publishing_components/components/details", {
title: "Using a lead image",
} do %>
<% lead_image_guidance %>
<% end %>
<% end %>

<div class="govuk-grid-row">
<% if lead_image_hash %>
<div class="govuk-grid-column-one-third">
<img src="<%= lead_image_hash[:url] %>" alt="<%= lead_image_hash[:preview_alt_text] %>" class="app-view-edition-resource__preview">
<% unless lead_image_hash[:all_image_asset_variants_uploaded] %><span class="govuk-tag govuk-tag--green">Processing</span><% end %>
</div>
<div class="govuk-grid-column-two-thirds">
<p class="govuk-body"><strong>Caption: </strong><%= lead_image_hash[:caption] %></p>
<p class="govuk-body"><strong>Alt text: </strong><%= lead_image_hash[:alt_text] %></p>
</div>
<% end %>

<% if lead_image_hash || @edition.type == "CaseStudy" %>
<%= form_with(url: update_image_display_option_admin_edition_path(@edition), method: :patch) do |form| %>
<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
<% if @edition.type == "CaseStudy" %>
<%= hidden_field_tag "edition[image_display_option]", new_image_display_option %>
<%= render "govuk_publishing_components/components/button", {
text: update_image_display_option_button_text,
secondary_solid: true,
margin_bottom: 4,
} %>
<% end %>

<% if lead_image_hash %>
<% lead_image_hash[:links].each do |link| %><%= link %><% end %>
<% end %>
</div>
<% end %>
<% end %>

</div>
<%= render Admin::EditionImages::LeadImageComponent.new(edition: edition) %>

<%= render "govuk_publishing_components/components/heading", {
text: "Images available to use in document",
font_size: "m",
padding: true,
} %>

<% if document_images %>
<% if document_images.present? %>
<%= render "govuk_publishing_components/components/inset_text", {
text: "Copy the image markdown code to add images to the document body.",
margin_top: 0,
} %>

<ul class="govuk-list">
<% document_images.each do |image| %>
<li class="govuk-grid-row">
<div class="govuk-grid-column-one-third">
<img src="<%= image[:url] %>" alt="<%= image[:preview_alt_text] %>" class="app-view-edition-resource__preview">
<% unless image[:all_image_asset_variants_uploaded] %><span class="govuk-tag govuk-tag--green">Processing</span><% end %>
</div>
<div class="govuk-grid-column-two-thirds">
<p class="govuk-body"><strong>Caption: </strong><%= image[:caption] %></p>
<p class="govuk-body"><strong>Alt text: </strong><%= image[:alt_text] %></p>
<%= render "govuk_publishing_components/components/copy_to_clipboard", {
label: tag.strong("Markdown code:"),
copyable_content: image[:markdown],
button_text: "Copy Markdown",
} %>
</div>
<div class="app-view-edition-resource__actions govuk-grid-column-full govuk-button-group">
<% image[:links].each do |link| %><%= link %><% end %>
</div>
</li>
<% if image != document_images.last %>
<li aria-hidden="true"><hr class="app-view-edition-resource__section-break govuk-section-break govuk-section-break--visible"></li>
<% end %>
<%= render Admin::EditionImages::ImageComponent.new(edition: edition, image: image, last_image: image == document_images.last) %>
<% end %>
</ul>
<% else %>
Expand Down
73 changes: 4 additions & 69 deletions app/components/admin/edition_images/uploaded_images_component.rb
Original file line number Diff line number Diff line change
Expand Up @@ -5,78 +5,13 @@ def initialize(edition:)
@edition = edition
end

def can_have_lead_image?
@edition.can_have_custom_lead_image?
end

def lead_image
@lead_image ||= can_have_lead_image? ? @edition.lead_image : nil
end

def lead_image_hash
image_to_hash(lead_image, 0) if lead_image
end

def document_images
@document_images ||= (@edition.images - [lead_image].compact)
.map.with_index(1) { |image, index| image_to_hash(image, index) }
end

def new_image_display_option
if @edition.image_display_option == "no_image" && @edition.images.present?
"custom_image"
elsif @edition.image_display_option == "no_image"
"organisation_image"
else
"no_image"
end
end

def update_image_display_option_button_text
if @edition.images.present?
return "#{new_image_display_option == 'no_image' ? 'Hide' : 'Show'} lead image"
end

"#{new_image_display_option == 'no_image' ? 'Remove lead' : 'Use default'} image"
end

def lead_image_guidance
if @edition.type == "CaseStudy"
tag.p("Using a lead image is optional and can be shown or hidden. The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
else
tag.p("The first image you upload is used as the lead image.", class: "govuk-body") + tag.p("The lead image appears at the top of the document. The same image cannot be used in the body text.", class: "govuk-body")
end
end

private

def all_image_asset_variants_uploaded?(image)
image.image_data.all_asset_variants_uploaded? if image.image_data.present?
end
attr_reader :edition

def image_to_hash(image, index)
{
url: image.url,
preview_alt_text: lead_image == image ? "Lead image" : "Image #{index}",
caption: image.caption.presence || "None",
alt_text: image.alt_text.presence || "None",
markdown: unique_names? ? "[Image: #{image.filename}]" : "!!#{index}",
links: links_for_image(image),
all_image_asset_variants_uploaded: all_image_asset_variants_uploaded?(image),
}
end

def unique_names?
return @unique_names if defined? @unique_names

names = @edition.images.map(&:filename)
@unique_names = (names.uniq.length == names.length)
end
def document_images
return edition.images unless edition.can_have_custom_lead_image?

def links_for_image(image)
links = []
links << link_to("Edit details", edit_admin_edition_image_path(@edition, image), class: "govuk-link")
links << link_to("Delete image", confirm_destroy_admin_edition_image_path(@edition, image), class: "govuk-link gem-link--destructive")
links
edition.images - [edition.lead_image].compact
end
end
Loading

0 comments on commit 05969b5

Please sign in to comment.