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/price_lists.js

@@ -1,18 +1,19 @@
 import Vue from 'vue/dist/vue.esm';
+import * as bootstrap from 'bootstrap';
 import api from './api/axiosInstance';
 
 document.addEventListener('turbo:load', () => {
   const element = document.getElementById('pricelists-container');
-  if (element != null) {
+  if (element != null && !element.__vue__) {
     const priceLists = JSON.parse(element.dataset.priceLists);
     const products = JSON.parse(element.dataset.products);
 
     products.forEach(p => p.editing = false);
 
-    new Vue({
+    const app = new Vue({
       el: element,
       data: () => {
-        return { priceLists: priceLists, products: products, showArchived: false, errors: [] };
+        return { priceLists: priceLists, products: products, showArchived: false, errors: [], currentlyEditingPriceList: null };
       },
       computed: {
         filteredPriceLists: function() {
@@ -141,6 +142,11 @@ document.addEventListener('turbo:load', () => {
           }
         },
 
+        editPriceList: function(priceList) {
+          this.currentlyEditingPriceList = { ...priceList };
+          bootstrap.Modal.getOrCreateInstance('#editPriceListModal').show();
+        },
+
         archivePriceList: function(priceList) {
           api.post(`/price_lists/${priceList.id}/archive`, {}).then((response) => {
             priceList.archived_at = response.data;
@@ -176,5 +182,27 @@ document.addEventListener('turbo:load', () => {
         },
       }
     });
+
+    const editModalElement = document.getElementById('editPriceListModal');
+    if (editModalElement && !editModalElement.__vue__) {
+      new Vue({
+        el: editModalElement,
+        computed: {
+          url() {
+            return '/price_lists/' + app.currentlyEditingPriceList?.id;
+          },
+          name: {
+            get() {
+              return app.currentlyEditingPriceList?.name || '';
+            },
+            set(value) {
+              if (app.currentlyEditingPriceList) {
+                app.currentlyEditingPriceList.name = value;
+              }
+            }
+          }
+        }
+      });
+    }
   }
 });

app/views/price_lists/_edit_modal.html.erb

@@ -0,0 +1,30 @@
+<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" id="editPriceListModalLabel">
+          Prijslijst wijzigen
+        </h5>
+        <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"/>
+      </div>
+      <form :action="url" method="post">
+        <input type="hidden" name="_method" value="patch">
+        <input type="hidden" name="authenticity_token" value="<%= form_authenticity_token %>">
+        <div class="modal-body">
+          <div class="mb-3">
+            <label class="form-label" for="edit-price-list-name">Naam *</label>
+            <input id="edit-price-list-name" class="form-control" name="price_list[name]" v-model="name" required="true" placeholder="Naam">
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" data-bs-dismiss="modal" type="button">
+            Annuleren
+          </button>
+          <button class="btn btn-primary" type="submit" data-disable-with="Bezig...">
+            Naam wijzigen
+          </button>
+        </div>
+      </form>
+    </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' %>
+        <h5 class="modal-title" id="newPriceListModalLabel">
+          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

@@ -4,6 +4,7 @@
 <% end %>
 <% content_for :modal do %>
   <%= render 'modal' %>
+  <%= render 'edit_modal' %>
 <% end %>
 
 <%= content_tag :div, id: "pricelists-container", class: "container footer-padding",
@@ -18,7 +19,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">
             <i class="fas fa-plus me-1"></i>
             Nieuwe prijslijst
           </button>
@@ -55,10 +56,10 @@
         <tr @keyup.enter="saveProduct(product)" @keyup.esc="cancelEditProduct(product)" class="products-product" v-for="product in products" v-on:dblclick="editProduct(product)">
           <template v-if="product.editing">
             <td class="products-cancel-edit" v-on:click="cancelEditProduct(product)">
-              <span title="Cancel" v-if="product.id">
+              <span title="Cancel" v-if="product.id" aria-label="Annuleren">
                 <i class="fas fa-arrow-rotate-left fa-lg"></i>
               </span>
-              <span title="Remove" v-else="">
+              <span title="Remove" v-else="" aria-label="Verwijderen">
                 <i class="fas fa-xmark fa-lg"></i>
               </span>
             </td>
@@ -103,7 +104,7 @@
               </div>
             </td>
             <td class="products-save-new" v-on:click="saveProduct(product)">
-            <span class="btn btn-primary">
+            <span class="btn btn-primary" aria-label="Opslaan">
               <i class="far fa-floppy-disk fa-lg"></i>
             </span></td>
           </template>
@@ -123,7 +124,7 @@
               </span>
             </td>
             <td class="products-new-edit-button" v-if="<%= policy(Product).update? %> && filteredPriceLists.length > 0">
-              <button class="btn btn-sm btn-outline-secondary" v-on:click="editProduct(product)">
+              <button class="btn btn-sm btn-outline-secondary" v-on:click="editProduct(product)" aria-label="Product bewerken">
                 <i class="fas fa-pencil"></i>
               </button>
             </td>
@@ -140,14 +141,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)">
-              <i class="fas fa-repeat"></i>
-            </button>
-            <button class="btn btn-sm btn-outline-secondary" v-else-if="<%= policy(PriceList).archive? %>" v-on:click="archivePriceList(priceList)">
-              <i class="fas fa-archive"></i>
-            </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="<%= policy(PriceList).unarchive? %> && priceList.archived_at" v-on:click="unarchivePriceList(priceList)" aria-label="Prijslijst herstellen">
+                  <i class="fas fa-repeat"></i>
+                </button>
+                <button class="btn btn-sm btn-outline-secondary" v-else-if="<%= policy(PriceList).archive? %>" v-on:click="archivePriceList(priceList)" aria-label="Prijslijst archiveren">
+                  <i class="fas fa-archive"></i>
+                </button>
+              </div>
+              <button class="btn btn-sm btn-outline-secondary ms-2" v-if="<%= policy(PriceList).update? %>" v-on:click="editPriceList(priceList)" aria-label="Prijslijst bewerken">
+                <i class="fas fa-pencil"></i>
+              </button>
+            </div>
           </td>
         </tr>
         </tbody>