improve website listing

featurist · Aug 20, 2021 · d474eaa · d474eaa
1 parent 45b5e5a
commit d474eaa
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 28 deletions.
diff --git a/app/controllers/initiatives_controller.rb b/app/controllers/initiatives_controller.rb
@@ -70,6 +70,7 @@ def update
     @initiative.assign_attributes initiative_params
     @initiative.update_location_from_postcode
 
+    @initiative.remove_empty_websites
     if @initiative.save(validate: publication_status != 'draft')
       @initiative.images.attach images if images
       if (params[:step] || '').empty?
@@ -119,6 +120,7 @@ def update_solutions(initiative)
 
   def set_initiative
     @initiative = Initiative.find(params[:id])
+    @initiative.websites << InitiativeWebsite.new if @initiative.websites.empty?
 
     redirect_to initiatives_url unless can_edit_initiative?(@initiative)
   end

diff --git a/app/models/initiative.rb b/app/models/initiative.rb
@@ -130,6 +130,10 @@ def carbon_saving_quantified?
     carbon_saving_amount&.positive?
   end
 
+  def remove_empty_websites
+    websites.delete(websites.select { |website| website.url.blank? })
+  end
+
   private
 
   def set_default_location

diff --git a/app/views/initiatives/_form.html.erb b/app/views/initiatives/_form.html.erb
@@ -117,28 +117,18 @@
       <%= f.check_box :consent_to_share_phone, 'Make this phone number public. (Please ensure you have permission to share it first)' %>
     <% end %>
 
-    <h2 class="u-mb">Website & Social Media</h2>
+    <%= f.label :website, 'Website(s) or social media links for further project info' %>
     <div id="initiative_websites" class="CollectionItem-container">
-      <table>
-        <thead>
-          <tr>
-            <th>Website</th>
-            <th>Delete?</th>
-          </tr>
-        </thead>
-
-        <tbody>
-          <%= f.fields_for :websites do |website_form| %>
-            <%= render 'partials/website_fields_row', f: website_form %>
-          <% end %>
-        </tbody>
-      </table>
-    </div>
-    <div class="FormField">
-      <%= f.fields_for :websites, InitiativeWebsite.new do |website_form| %>
-        <%= add_object_link 'Add website', 'initiative_websites', :partial => 'partials/website_fields_row', :locals => { :f => website_form } %>
+      <%= f.fields_for :websites do |website_form| %>
+        <%= website_form.form_field :url do %>
+          <%= website_form.text_field :url, placeholder: 'eg: https://twitter.com/carbon-map' %>
+        <% end %>
       <% end %>
+      <%= javascript_packs_with_chunks_tag 'initiative_websites', 'data-turbolinks-track': 'reload' %>
     </div>
+    <a href="#" data-content="add_initiative_website">
+      <span>Add another</span><img src="<%=asset_pack_path("media/icons/right_arrow.svg")%>">
+    </a>
   <% end %>
 
   <%= initiative_step 5, @current_initiative_step, title: 'Help us understand how you got going', next_text: 'Next: project sector and notes' do %>

diff --git a/app/views/partials/_initiative_website.html.erb b/app/views/partials/_initiative_website.html.erb
diff --git a/frontend/packs/initiative_websites.js b/frontend/packs/initiative_websites.js
@@ -0,0 +1,18 @@
+window.addEventListener("load", () => {
+  document
+    .querySelector("[data-content=add_initiative_website]")
+    .addEventListener("click", e => {
+      e.preventDefault();
+      let index = 0;
+      while (
+        document.querySelector(
+          `#initiative_websites_attributes_${index}_url`
+        ) != null
+      ) {
+        index++;
+      }
+      document.querySelector(
+        "#initiative_websites"
+      ).innerHTML += `<div class="FormField"><input class="FormField-input" placeholder="eg: https://twitter.com/carbon-map" type="text" name="initiative[websites_attributes][${index}][url]" id="initiative_websites_attributes_${index}_url"></div>`;
+    });
+});