Skip to content

Commit 11c7585

Browse files
fivefootbotdcollie2
fivefootbot
and
dcollie2
authored
styled providers (#37)
* styled providers * Fix provider view index spec --------- Co-authored-by: Danny Collier <[email protected]>
1 parent 5435986 commit 11c7585

File tree

6 files changed

+125
-80
lines changed

6 files changed

+125
-80
lines changed

‎app/views/providers/_form.html.erb

+27-36
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,32 @@
1-
<%= form_with(model: provider) do |form| %>
2-
<% if provider.errors.any? %>
3-
<div style="color: red">
4-
<h2><%= pluralize(provider.errors.count, "error") %> prohibited this provider from being saved:</h2>
5-
6-
<ul>
7-
<% provider.errors.each do |error| %>
8-
<li><%= error.full_message %></li>
9-
<% end %>
10-
</ul>
11-
</div>
12-
<% end %>
13-
14-
15-
<div class="form-body">
16-
<div class="row">
17-
<div class="col-md-4">
18-
<%= form.label :name, style: "display: block" %>
1+
<div class="card-content">
2+
<div class="card-body">
3+
<p>Providers should ... Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
4+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
5+
ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
6+
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
7+
laborum.</p>
8+
<%= form_with(model: @provider, local: true, class: "form") do |f| %>
9+
<div class="row">
10+
<div class="col-md-12 col-12">
11+
<div class="form-group">
12+
<%= f.label :name, "Provider Name" %>
13+
<%= f.text_field :name, class: "form-control", placeholder: "Provider" %>
14+
</div>
1915
</div>
20-
<div class="col-md-8 form-group">
21-
<%= form.text_field :name %>
16+
</div>
17+
<div class="row">
18+
<div class="col-md-12 col-12">
19+
<div class="form-group">
20+
<%= f.label :provider_type, style: "display: block" %>
21+
<%= f.text_field :provider_type, class: "form-control" %>
22+
</div>
2223
</div>
23-
</div>
24-
</div>
2524

26-
<div class="form-body">
27-
<div class="row">
28-
<div class="col-md-4">
29-
<%= form.label :provider_type, style: "display: block" %>
25+
<div class="col-12 d-flex justify-content-end">
26+
<%= submit_button(f) %>
27+
<%= link_to "Cancel", providers_path, class: "btn btn-light-secondary me-1 mb-1" %>
3028
</div>
31-
<div class="col-md-8 form-group">
32-
<%= form.text_field :provider_type %>
33-
</div>
34-
</div>
35-
</div>
36-
37-
38-
<div class="col-sm-12 d-flex justify-content-end">
39-
<%= form.submit class: "btn btn-primary me-1 mb-1" %>
29+
</div>
30+
<% end %>
31+
</div>
4032
</div>
41-
<% end %>

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

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<% content_for :title, "Editing provider" %>
22

3-
<h1>Editing provider</h1>
4-
5-
<%= render "form", provider: @provider %>
6-
7-
<br>
8-
9-
<div>
10-
<%= link_to "Show this provider", @provider %> |
11-
<%= link_to "Back to providers", providers_path %>
12-
</div>
3+
<section id="multiple-column-form">
4+
<div class="row match-height">
5+
<div class="col-12">
6+
<div class="card">
7+
<div class="card-header">
8+
<h3>Edit Provider</h3>
9+
</div>
10+
<%= render "form", provider: @provider %>
11+
</div>
12+
</div>
13+
</div>
14+
</section>

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

+51-16
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,51 @@
1-
<p style="color: green"><%= notice %></p>
2-
3-
<% content_for :title, "Providers" %>
4-
5-
<h1>Providers</h1>
6-
7-
<div id="providers">
8-
<% @providers.each do |provider| %>
9-
<%= render provider %>
10-
<p>
11-
<%= link_to "Show this provider", provider %>
12-
</p>
13-
<% end %>
14-
</div>
15-
16-
<%= link_to "New provider", new_provider_path %>
1+
<section class="section">
2+
<div class="row" id="table-striped">
3+
<div class="col-12 cold-md-12">
4+
<div class="card">
5+
<div class="card-header d-flex justify-content-between align-items-center">
6+
<h2>Providers</h2>
7+
<%= link_to new_provider_path, class: "btn btn-primary" do %>
8+
<i class="bi bi-plus-circle-fill"></i> Add New Provider
9+
<% end %>
10+
</div>
11+
<div class="card-content">
12+
<div class="card-body">
13+
<p class="card-text">
14+
Lorem ipsum dolor sit amet, <code>consectetur adipiscing</code> elit. Sed do eiusmod tempor incididunt ut
15+
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip
16+
ex ea commodo consequat. Duis aute irure dolor in <code>reprehenderit</code> in voluptate velit esse cillum dolore eu fugiat nulla
17+
pariatur. Excepteur sint <code>occaecat cupidatat</code> non proident, sunt in culpa qui officia deserunt mollit anim id est
18+
laborum.
19+
</p>
20+
<!-- table striped -->
21+
<div class="table-responsive">
22+
<table class="table table-lg table-striped mb-0">
23+
<thead>
24+
<tr>
25+
<th>Providers</th>
26+
<th>Type</th>
27+
<th class="text-end">Provider Actions</th>
28+
</tr>
29+
</thead>
30+
<tbody>
31+
<% @providers.each do |provider| %>
32+
<tr id="<%= dom_id(provider) %>" class="provider-listing">
33+
<td class="text-bold-500"><%= provider.name %></td>
34+
<td><%= provider.provider_type %></td>
35+
<td class="text-end">
36+
<%= show_page_tool_link(provider, "Show Provider Details") %>
37+
<%= link_to edit_provider_path(provider), class: "btn btn-secondary btn-sm" do %>
38+
<i class="bi bi-pencil"></i>
39+
<% end %>
40+
<%= delete_tool_link(provider, "Delete Provider") %>
41+
</td>
42+
</tr>
43+
<% end %>
44+
</tbody>
45+
</table>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
</section>

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

+12-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
<% content_for :title, "New provider" %>
2-
3-
<h1>New provider</h1>
4-
5-
<%= render "form", provider: @provider %>
6-
7-
<br>
8-
9-
<div>
10-
<%= link_to "Back to providers", providers_path %>
11-
</div>
1+
<section id="multiple-column-form">
2+
<div class="row match-height">
3+
<div class="col-12">
4+
<div class="card">
5+
<div class="card-header">
6+
<h3>Create New Provider</h3>
7+
</div>
8+
<%= render "form", provider:@providers %>
9+
</div>
10+
</div>
11+
</div>
12+
</section>

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

+22-6
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,26 @@
11
<p style="color: green"><%= notice %></p>
22

3-
<%= render @provider %>
3+
<section id="multiple-column-form">
4+
<div class="row match-height">
5+
<div class="col-12">
6+
<div class="card">
7+
<div class="card-header">
8+
<h2>Providers</h2>
9+
<h4><%= @provider.name %></h4>
10+
</div>
11+
<div class="card-content">
12+
<div class="card-body">
13+
<%= render @provider %>
414

5-
<div>
6-
<%= link_to "Edit this provider", edit_provider_path(@provider) %> |
7-
<%= link_to "Back to providers", providers_path %>
15+
<div>
16+
<%= link_to "Edit this provider", edit_provider_path(@provider) %> |
17+
<%= link_to "Back to providers", providers_path %>
818

9-
<%= button_to "Destroy this provider", @provider, method: :delete %>
10-
</div>
19+
<%= button_to "Destroy this provider", @provider, method: :delete %>
20+
</div>
21+
</div>
22+
</div>
23+
</div>
24+
</div>
25+
</div>
26+
</section>

‎spec/views/providers/index.html.erb_spec.rb

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616

1717
it "renders a list of providers" do
1818
render
19-
cell_selector = 'div>p'
19+
cell_selector = 'tr.provider-listing > td'
2020
assert_select cell_selector, text: Regexp.new("Name".to_s), count: 2
2121
assert_select cell_selector, text: Regexp.new("Provider Type".to_s), count: 2
2222
end

0 commit comments

Comments
 (0)