Feature: Added the ability to edit a pricelist's name

app/controllers/price_lists_controller.rb

@@ -41,7 +41,7 @@ def update
     else
       flash[:error] = "Prijslijst wijzigen mislukt; #{@price_list.errors.full_messages.join(', ')}"
     end
-    redirect_to @price_list
+    redirect_to price_lists_path
   end
 
   def archive

app/javascript/packs/price_lists.js

@@ -16,10 +16,10 @@ document.addEventListener('turbolinks:load', () => {
     // Make sure property exists before Vue sees the data
     products.forEach(p => p.editing = false);
 
-    new Vue({
+    const app = new Vue({
       el: element,
       data: () => {
-        return { priceLists: priceLists, products: products, showArchived: false };
+        return { priceLists: priceLists, products: products, showArchived: false, currentlyEditingPriceList: null };
       },
       computed: {
         filteredPriceLists: function() {
@@ -133,6 +133,12 @@ document.addEventListener('turbolinks:load', () => {
           return products;
         },
 
+        editPriceList: function(priceList) {
+          this.currentlyEditingPriceList = priceList;
+          /* eslint-disable no-undef */
+          bootstrap.Modal.getOrCreateInstance('#editPriceListModal').show();
+        },
+
         archivePriceList: function(priceList) {
           this.$http.post(`/price_lists/${priceList.id}/archive`, {}).then((response) => {
             priceList.archived_at = response.data;
@@ -154,5 +160,17 @@ document.addEventListener('turbolinks:load', () => {
         },
       }
     });
+
+    new Vue({
+      el: document.getElementById('editPriceListModal'),
+      computed: {
+        url() {
+          return '/price_lists/' + app.currentlyEditingPriceList?.id;
+        },
+        name() {
+          return app.currentlyEditingPriceList?.name;
+        },
+      }
+    });
   }
 });

app/views/price_lists/_edit_modal.html.erb

@@ -0,0 +1,23 @@
+<div aria-hidden="true" aria-labelledby="editPriceListModalLabel" class="modal fade" id="editPriceListModal" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <h5 class="modal-title">
+          Prijslijst wijzigen
+        </h5>
+        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"/>
+      </div>
+      <%= simple_form_for(:price_list, wrapper: :horizontal_form, method: :patch) do |f| %>
+        <div class="modal-body">
+          <%= f.input :name, label: 'Naam', placeholder: 'Naam', required: true, input_html: { ':value': 'name' } %>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
+            Annuleren
+          </button>
+          <%= f.button :submit, 'Naam wijzigen', :data => {:disable_with => 'Bezig...'}, class: 'btn btn-primary', method: :patch, ':formaction': 'url'  %>
+        </div>
+      <% end %>
+    </div>
+  </div>
+</div>

app/views/price_lists/_modal.html.erb

@@ -1,9 +1,9 @@
-<div aria-hidden="true" aria-labelledby="editPriceListModalLabel" class="modal fade" id="editPriceListModal" role="dialog">
+<div aria-hidden="true" aria-labelledby="newPriceListModalLabel" class="modal fade" id="newPriceListModal" role="dialog">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
       <div class="modal-header">
         <h5 class="modal-title">
-          <%= @price_list.persisted? ? 'Prijslijst wijzigen' : 'Nieuwe prijslijst' %>
+          Nieuwe prijslijst
         </h5>
         <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"/>
       </div><%= simple_form_for @price_list, wrapper: :horizontal_form do |f| %>

app/views/price_lists/index.html.erb

@@ -1,6 +1,7 @@
 <% content_for :title, "Prijslijsten - #{Rails.application.config.x.site_name}" %>
 <% content_for :modal do %>
   <%= render 'modal' %>
+  <%= render 'edit_modal' %>
 <% end %>
 
 <%= content_tag :div, id: "pricelists-container", class: "container footer-padding",
@@ -15,7 +16,7 @@
           Hier worden alle prijslijsten en alle producten getoond.
         </span>
         <% if policy(PriceList).create? %>
-          <button class="btn btn-sm btn-primary" data-bs-target="#editPriceListModal" data-bs-toggle="modal" role="button">
+          <button class="btn btn-sm btn-primary" data-bs-target="#newPriceListModal" data-bs-toggle="modal" role="button">
             <%= fa_icon 'plus', class: 'me-1' %>
             Nieuwe prijslijst
           </button>
@@ -113,14 +114,20 @@
               <% end %>
             </div>
           </td>
-          <td class="products-archive-button center-text" v-for="priceList in filteredPriceLists">
-            <button class="btn btn-sm btn-outline-secondary" v-if="<%= policy(PriceList).unarchive? %> && priceList.archived_at" v-on:click="unarchivePriceList(priceList)">
-              <%= fa_icon 'repeat' %>
-            </button>
-            <button class="btn btn-sm btn-outline-secondary" v-else-if="<%= policy(PriceList).archive? %>" v-on:click="archivePriceList(priceList)">
-              <%= fa_icon 'archive' %>
-            </button>
-            <div></div>
+          <td v-for="priceList in filteredPriceLists">
+            <div class="center-text d-flex">
+              <div class="products-archive-button">
+                <button class="btn btn-sm btn-outline-secondary" v-if="priceList.archived_at" v-on:click="unarchivePriceList(priceList)">
+                  <%= fa_icon 'repeat' %>
+                </button>
+                <button class="btn btn-sm btn-outline-secondary" v-else="" v-on:click="archivePriceList(priceList)">
+                  <%= fa_icon 'archive' %>
+                </button>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary ms-2" v-if="<%= policy(PriceList).update? %>" v-on:click="editPriceList(priceList)">
+                  <%= fa_icon 'pencil' %>
+              </button>
+            </div>
           </td>
         </tr>
         </tbody>