Skip to content

Commit e00f1ed

Browse files
andrewmcodesandrewmcodes
authored
Componetize layout (#1224)
* Componetize layout * tests
1 parent dc002ed commit e00f1ed

File tree

79 files changed

+893
-775
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+893
-775
lines changed

‎app/components/metabase_component.html.erb

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<small class="text-center d-block text-muted mb-2">
2+
Please ensure ad blockers are disabled to view the overview.
3+
</small>
4+
5+
<iframe
6+
src="<%= src %>"
7+
title="<%= title %>"
8+
class="metabase-card border rounded"
9+
height="<%= height %>"
10+
scrolling="yes"
11+
allowtransparency>
12+
</iframe>

‎app/components/metabase_component.rb

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
class MetabaseComponent < ViewComponent::Base
2+
def initialize(src:, title: "Metabase dashboard", height: 800)
3+
@src = src
4+
@title = title
5+
@height = height
6+
end
7+
8+
private
9+
10+
attr_reader :src, :title, :height
11+
end

‎app/components/page/header_component.html.erb

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<header class="page-title-bar mb-0">
2+
<div class="d-flex flex-column flex-md-row">
3+
<div class="lead mb-3">
4+
<h1 class="h4 font-weight-bold mb-1">
5+
<%= title %>
6+
<span hidden role="status" class="reflex-activity spinner-border spinner-border-sm text-primary" style="position:relative; top:-5px;"></span>
7+
</h1>
8+
<%= tag.span subtitle, class: "d-block text-muted" if subtitle %>
9+
</div>
10+
<% if datepicker || buttons.any? || sidebar %>
11+
<div class="ml-auto d-flex">
12+
<%= render("/shared/date_range_picker") if datepicker %>
13+
<% buttons.each do |link| %>
14+
<%= link.html_safe %>
15+
<% end if buttons.any? %>
16+
<%= button_tag(type: "button", class: "btn tile layout-button d-xl-none", onclick: "CodeFundTheme.toggleSidebar()") do %>
17+
<%= tag.span class: "fa fa-angle-double-left" %>
18+
<% end if sidebar %>
19+
</div>
20+
<% end %>
21+
</div>
22+
</header>

‎app/components/page/header_component.rb

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
class Page::HeaderComponent < ViewComponent::Base
2+
def initialize(title: nil, subtitle: nil, buttons: [], datepicker: false, sidebar: false)
3+
@title = title
4+
@subtitle = subtitle
5+
@buttons = buttons
6+
@datepicker = datepicker
7+
@sidebar = sidebar
8+
end
9+
10+
private
11+
12+
attr_reader :title, :subtitle, :buttons, :datepicker, :sidebar
13+
end

‎app/components/page_component.html.erb

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<div class="page<%= " has-sidebar has-sidebar-expand-xl" if sidebar %>">
2+
<%= tag.div(class: "sidebar-backdrop") if sidebar %>
3+
<div class="page-inner" data-controller="auto-height">
4+
<%= header %>
5+
<%= render("/#{subject_view_directory}/tabs", subject: subject) if subject&.persisted? && tabs %>
6+
<div class="page-section"><%= body %></div>
7+
<%= render "/#{subject_view_directory}/sidebar", subject: subject if sidebar %>
8+
</div>
9+
</div>

‎app/components/page_component.rb

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
class PageComponent < ViewComponent::Base
2+
with_content_areas :header, :body
3+
4+
def initialize(subject: nil, tabs: false, sidebar: false)
5+
@subject = subject
6+
@tabs = tabs
7+
@sidebar = sidebar
8+
end
9+
10+
def subject_view_directory
11+
return "" unless subject
12+
subject.class.name.underscore.pluralize
13+
end
14+
15+
private
16+
17+
attr_reader :subject, :sidebar, :tabs
18+
end

‎app/javascript/controllers/auto_height_controller.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// Used to make sure `shared/layout` is the full height of the browser
1+
// Used to make sure `PageComponent` is the full height of the browser
22
// and takes zoom percentage in to account.
33
import { Controller } from 'stimulus'
44

‎app/views/administrator_dashboards/show.html.erb

+6-12
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,6 @@
1-
<div class="page-inner">
2-
<%= render "/shared/page_heading_with_subtitle",
3-
title: "Administrator Dashboard",
4-
datepicker: false %>
5-
<iframe
6-
src="<%= @iframe_url %>"
7-
title="Administrator Dashboard"
8-
class="metabase-card border rounded"
9-
height="2000"
10-
scrolling="no"
11-
allowtransparency></iframe>
12-
</div>
1+
<%= render(PageComponent.new) do |component| %>
2+
<%= component.with(:header) { render(Page::HeaderComponent.new(title: "Administrator Dashboard")) } %>
3+
<% component.with(:body) do %>
4+
<%= render(MetabaseComponent.new(src: @iframe_url, title: "Administrator Metabase Dashboard")) %>
5+
<% end %>
6+
<% end %>

‎app/views/audiences/index.html.erb

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
<%= render "/shared/index_layout",
2-
title: "Audiences" do %>
3-
<%= card do %>
4-
<%= card_body padding: "p-0" do %>
5-
<%= render "/audiences/table", audiences: @audiences %>
1+
<%= render(PageComponent.new) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: "Audiences")) %>
4+
<% end %>
5+
<% component.with(:body) do %>
6+
<%= card do %>
7+
<%= card_body padding: "p-0" do %>
8+
<%= render "/audiences/table", audiences: @audiences %>
9+
<% end %>
610
<% end %>
711
<% end %>
812
<% end %>

‎app/views/campaign_bundles/index.html.erb

+8-8
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
<%= render "/shared/index_layout",
2-
title: "Campaign Bundles",
3-
buttons: [
1+
<%= render(PageComponent.new) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: "Campaign Bundles", buttons: [
44
layout_button(link: new_campaign_bundle_path, icon: "fas fa-plus", title: "Add campaign bundle", admin: true)
5-
] do %>
6-
<%= render "/shared/data_list",
7-
resource_name: "campaign_bundles",
8-
collection: @campaign_bundles,
9-
pagy: @pagy %>
5+
])) %>
6+
<% end %>
7+
<% component.with(:body) do %>
8+
<%= render "/shared/data_list", resource_name: "campaign_bundles", collection: @campaign_bundles, pagy: @pagy %>
9+
<% end %>
1010
<% end %>

‎app/views/campaign_bundles/new.html.erb

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
<%= render layout: "/shared/layout",
2-
locals: {
3-
subject: @campaign_bundle,
4-
title: "New Ad Bundle",
5-
subtitle: "Fill out the form below"} do %>
6-
<%= render partial: "/campaign_bundles/form" %>
1+
<%= render(PageComponent.new(subject: @campaign_bundle)) do |component| %>
2+
<%= component.with(:header) { render(Page::HeaderComponent.new(title: "New Ad Bundle", subtitle: "Fill out the form below")) } %>
3+
<%= component.with(:body) { render(partial: "/campaign_bundles/form") } %>
74
<% end %>

‎app/views/campaign_bundles/show.html.erb

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign_bundle,
3-
tabs: false,
4-
buttons: [
5-
layout_button(link: new_campaign_bundle_path, icon: "fas fa-plus", title: "New campaign bundle", admin: true),
6-
]
7-
} do %>
8-
<hr class="my-3" />
9-
<%= card do %>
10-
<%= card_body padding: "p-0" do %>
11-
<%= render "/campaign_bundles/campaigns/table", campaigns: @campaign_bundle.campaigns %>
1+
<%= render(PageComponent.new(subject: @campaign_bundle)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign_bundle.name, buttons: [
4+
layout_button(link: new_campaign_bundle_path, icon: "fas fa-plus", title: "New campaign bundle", admin: true)
5+
])) %>
6+
<% end %>
7+
<% component.with(:body) do %>
8+
<hr class="my-3" />
9+
<%= card do %>
10+
<%= card_body padding: "p-0" do %>
11+
<%= render "/campaign_bundles/campaigns/table", campaigns: @campaign_bundle.campaigns %>
12+
<% end %>
1213
<% end %>
1314
<% end %>
1415
<% end %>

‎app/views/campaign_countries/index.html.erb

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign,
3-
sidebar: true,
4-
datepicker: true,
5-
buttons: [
6-
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
7-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
8-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
9-
]
10-
} do %>
11-
<%= card do %>
12-
<%= card_body padding: "p-0" do %>
13-
<%= render "/campaign_countries/table", campaign: @campaign, pagy: @pagy %>
1+
<%= render(PageComponent.new(subject: @campaign, sidebar: true, tabs: true)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign.name, sidebar: true, datepicker: true, buttons: [
4+
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
5+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
6+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
7+
])) %>
8+
<% end %>
9+
<% component.with(:body) do %>
10+
<%= card do %>
11+
<%= card_body padding: "p-0" do %>
12+
<%= render "/campaign_countries/table", campaign: @campaign, pagy: @pagy %>
13+
<% end %>
1414
<% end %>
1515
<% end %>
1616
<% end %>

‎app/views/campaign_creatives/index.html.erb

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign,
3-
sidebar: true,
4-
datepicker: true,
5-
buttons: [
6-
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
7-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
8-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
9-
]
10-
} do %>
11-
<%= card do %>
12-
<%= card_body padding: "p-0" do %>
13-
<%= render "/campaign_creatives/table", campaign: @campaign, pagy: @pagy %>
1+
<%= render(PageComponent.new(subject: @campaign, sidebar: true, tabs: true)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign.name, sidebar: true, datepicker: true, buttons: [
4+
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
5+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
6+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
7+
])) %>
8+
<% end %>
9+
<% component.with(:body) do %>
10+
<%= card do %>
11+
<%= card_body padding: "p-0" do %>
12+
<%= render "/campaign_creatives/table", campaign: @campaign, pagy: @pagy %>
13+
<% end %>
1414
<% end %>
1515
<% end %>
1616
<% end %>

‎app/views/campaign_dailies/index.html.erb

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign,
3-
sidebar: true,
4-
datepicker: true,
5-
buttons: [
6-
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
7-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
8-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
9-
]
10-
} do %>
11-
<%= card do %>
12-
<%= card_body padding: "p-0" do %>
13-
<%= render "/campaign_dailies/table", campaign: @campaign, pagy: @pagy %>
1+
<%= render(PageComponent.new(subject: @campaign, sidebar: true, tabs: true)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign.name, sidebar: true, datepicker: true, buttons: [
4+
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
5+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
6+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
7+
])) %>
8+
<% end %>
9+
<% component.with(:body) do %>
10+
<%= card do %>
11+
<%= card_body padding: "p-0" do %>
12+
<%= render "/campaign_dailies/table", campaign: @campaign, pagy: @pagy %>
13+
<% end %>
1414
<% end %>
1515
<% end %>
1616
<% end %>

‎app/views/campaign_properties/index.html.erb

+13-13
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign,
3-
sidebar: true,
4-
datepicker: true,
5-
buttons: [
6-
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
7-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
8-
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
9-
]
10-
} do %>
11-
<%= card do %>
12-
<%= card_body padding: "p-0" do %>
13-
<%= render "/campaign_properties/table", campaign: @campaign, pagy: @pagy %>
1+
<%= render(PageComponent.new(subject: @campaign, sidebar: true, tabs: true)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign.name, sidebar: true, datepicker: true, buttons: [
4+
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign"),
5+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "paused"}}), method: :put, icon: "fad fa-pause", title: "Pause campaign", display: @campaign.active?),
6+
layout_button(link: campaign_path(@campaign.id, params: {campaign: {status: "active"}}), method: :put, icon: "fad fa-play", title: "Activate campaign", display: @campaign.paused?)
7+
])) %>
8+
<% end %>
9+
<% component.with(:body) do %>
10+
<%= card do %>
11+
<%= card_body padding: "p-0" do %>
12+
<%= render "/campaign_properties/table", campaign: @campaign, pagy: @pagy %>
13+
<% end %>
1414
<% end %>
1515
<% end %>
1616
<% end %>

‎app/views/campaigns/_layout.html.erb

-10
This file was deleted.

‎app/views/campaigns/edit.html.erb

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
<%= render layout: "/shared/layout", locals: {
2-
subject: @campaign,
3-
sidebar: false,
4-
buttons: [
5-
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign", admin: true)
6-
]
7-
} do %>
8-
<%= render "/campaigns/form", campaign: @campaign %>
1+
<%= render(PageComponent.new(subject: @campaign, tabs: true)) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: @campaign.name, buttons: [
4+
layout_button(link: new_campaign_path(clone: @campaign.id), icon: "fad fa-copy", title: "Clone campaign", admin: true)
5+
])) %>
6+
<% end %>
7+
<%= component.with(:body) { render("/campaigns/form", campaign: @campaign) } %>
98
<% end %>

‎app/views/campaigns/index.html.erb

+7-6
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,15 @@
1-
<%= render "/shared/index_layout",
2-
title: "Campaigns",
3-
buttons: [
1+
<%= render(PageComponent.new) do |component| %>
2+
<% component.with(:header) do %>
3+
<%= render(Page::HeaderComponent.new(title: "Campaigns", buttons: [
44
layout_button(link: new_campaign_path, icon: "fas fa-plus", title: "Add campaign", admin: true)
5-
] do %>
6-
<div class="page-section">
5+
])) %>
6+
<% end %>
7+
<% component.with(:body) do %>
78
<%= render "/administrator_dashboards/sortable_dropdown" %>
89
<%= card do %>
910
<%= card_body padding: "p-0" do %>
1011
<%= render "/administrator_dashboards/table", campaigns: @campaigns, pagy: @pagy %>
1112
<% end %>
1213
<% end %>
13-
</div>
14+
<% end %>
1415
<% end %>

‎app/views/campaigns/new.html.erb

+3-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,4 @@
1-
<%= render layout: "/shared/layout",
2-
locals: {
3-
subject: @campaign,
4-
title: "Create Campaign",
5-
subtitle: "Fill out the form below"} do %>
6-
<%= render "/campaigns/form", campaign: @campaign %>
1+
<%= render(PageComponent.new(subject: @campaign)) do |component| %>
2+
<%= component.with(:header) { render(Page::HeaderComponent.new(title: "Create Campaign", subtitle: "Fill out the form below")) } %>
3+
<%= component.with(:body) { render("/campaigns/form", campaign: @campaign) } %>
74
<% end %>

0 commit comments

Comments
 (0)