Move vue-resource to axios and consolidate (#1157)

lodewiges · web-flow · commit 83510dd947f5 · 2025-12-23T13:41:59.000+01:00
* Move all js and vue to axios

* run yarn install

* fix lint

* Fix archive pricelists &amp; make laungue clearer

* update yarrn.lock

* fix ai suggestions
diff --git a/app/javascript/activities.js b/app/javascript/activities.js
@@ -1,10 +1,6 @@
 import Vue from 'vue/dist/vue.esm';
-import VueResource from 'vue-resource';
-
-Vue.use(VueResource);
 
 document.addEventListener('turbo:load', () => {
-  Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
   const element = document.getElementById('new_activity_modal');
   if (element) {
     const priceLists = JSON.parse(element.dataset.priceLists);
diff --git a/app/javascript/activity.js b/app/javascript/activity.js
@@ -1,9 +1,7 @@
 import Vue from 'vue/dist/vue.esm';
-import VueResource from 'vue-resource';
 
 import ProductTotals from './components/activity/ProductTotals.vue';
 
-Vue.use(VueResource);
 let vueInstance = null;
 
 document.addEventListener('turbo:before-cache', () => {
@@ -14,7 +12,6 @@ document.addEventListener('turbo:before-cache', () => {
 });
 
 document.addEventListener('turbo:load', () => {
-  Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
   const element = document.getElementById('activity');
   if (element) {
     vueInstance = new Vue({
diff --git a/app/javascript/api/axiosInstance.js b/app/javascript/api/axiosInstance.js
@@ -0,0 +1,37 @@
+import axios from 'axios';
+
+/**
+ * Get CSRF token from meta tag
+ * @returns {string} CSRF token
+ */
+function getCsrfToken() {
+  const token = document.querySelector('meta[name="csrf-token"]');
+  return token ? token.getAttribute('content') : '';
+}
+
+/**
+ * Create and configure axios instance.
+ * CSRF is injected via a request interceptor so the latest token is used.
+ * @returns {AxiosInstance} Configured axios instance
+ */
+function createAxiosInstance() {
+  const instance = axios.create();
+
+  // Always ask for JSON responses
+  instance.defaults.headers.common['Accept'] = 'application/json';
+
+  instance.interceptors.request.use((config) => {
+    const csrfToken = getCsrfToken();
+    if (csrfToken) {
+      config.headers['X-CSRF-Token'] = csrfToken;
+    }
+    return config;
+  });
+
+  return instance;
+}
+
+const axiosInstance = createAxiosInstance();
+
+export default axiosInstance;
+export { getCsrfToken, axiosInstance };
diff --git a/app/javascript/components/ProductTable.vue b/app/javascript/components/ProductTable.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import axios from 'axios';
+import api from '../api/axiosInstance';
 
 export default {
   props: {
@@ -85,7 +85,7 @@ export default {
         order: orderData
       };
 
-      axios.patch(`/orders/${this.order.id}`, payload).then((response) => {
+      api.patch(`/orders/${this.order.id}`, payload).then((response) => {
         const updatedOrder = response.data;
 
         this.$emit('updateordertotal', this.order, updatedOrder.order_total);
diff --git a/app/javascript/components/UserInput.vue b/app/javascript/components/UserInput.vue
@@ -1,7 +1,7 @@
 <template lang="html">
   <div class="user-input position-relative">
     <input type="text" class="d-none" :name="name" :value="selectedSuggestion.id">
-    <input type="text" class="form-control bg-white" v-model="query" placeholder="Begin met typen..."
+    <input type="text" class="form-control bg-white" v-model="query" placeholder="Zoek op gebruiker"
            @input="updateValue"
            @keydown.enter="selectFirstSuggestion"
            aria-haspopup="true" v-bind:aria-expanded="dropdownOpened"
@@ -19,6 +19,8 @@
 </template>
 
 <script>
+import api from '../api/axiosInstance';
+
 export default {
   props: {
     name: {
@@ -76,8 +78,8 @@ export default {
         return;
       }
 
-      this.$http.post('/users/search.json', { query: this.query }).then( (response) => {
-        let results = response.body || [];
+      api.post('/users/search.json', { query: this.query }).then( (response) => {
+        let results = response.data || [];
 
         if (this.includePin && 'gepind'.indexOf(this.query.toLowerCase()) >= 0) {
           results.push({ name: 'Gepind', paid_with_pin: true });
diff --git a/app/javascript/components/activity/ProductTotals.vue b/app/javascript/components/activity/ProductTotals.vue
@@ -50,6 +50,7 @@
 </template>
 
 <script>
+import api from '../../api/axiosInstance';
 import UserInput from '../UserInput.vue';
 
 export default {
@@ -77,8 +78,8 @@ export default {
       this.isLoading = true;
 
       let params = {user: this.user.id, paid_with_cash: this.user.paid_with_cash, paid_with_pin: this.user.paid_with_pin};
-      this.$http.get(`/activities/${this.activity}/product_totals`, { params }).then((response) => {
-        this.orderTotals = response.body;
+      api.get(`/activities/${this.activity}/product_totals`, { params }).then((response) => {
+        this.orderTotals = response.data;
         this.totalAmount = this.orderTotals.reduce((a, b) => a + parseFloat(b.price), 0.0);
         this.isLoading = false;
       }).catch((error) => {
diff --git a/app/javascript/components/orderscreen/ActivityOrders.vue b/app/javascript/components/orderscreen/ActivityOrders.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script>
-import axios from 'axios';
+import api from '../../api/axiosInstance';
 import moment from 'moment';
 import ProductTable from '../ProductTable.vue';
 
@@ -97,7 +97,7 @@ export default {
         params = { user_id: this.user.id };
       }
 
-      let promise = axios.get('/orders', { params });
+      let promise = api.get('/orders', { params });
 
       return promise.then((response) => {
         const orders = response.data;
diff --git a/app/javascript/components/user/ActivityOrderHistory.vue b/app/javascript/components/user/ActivityOrderHistory.vue
@@ -17,7 +17,7 @@
 
 <script>
 import ProductTable from '../ProductTable.vue';
-import axios from 'axios';
+import api from '../../api/axiosInstance';
 import moment from 'moment';
 
 export default {
@@ -42,7 +42,7 @@ export default {
   created() {
     let params = { user_id: this.user.id, activity_id: this.activity.id };
 
-    let promise = axios.get('/orders', { params });
+    let promise = api.get('/orders', { params });
 
     promise.then((response) => {
       this.orders = response.data.sort((a, b) => (a.created_at > b.created_at) ? 1 : -1);
diff --git a/app/javascript/components/user/OrderHistory.vue b/app/javascript/components/user/OrderHistory.vue
@@ -55,7 +55,7 @@
 
 <script>
 import ActivityOrderHistory from './ActivityOrderHistory.vue';
-import axios from 'axios';
+import api from '../../api/axiosInstance';
 import moment from 'moment';
 
 export default {
@@ -76,7 +76,7 @@ export default {
   methods: {
     activityProvider() {
       this.isLoading = true;
-      let promise = axios.get('/users/'+this.user.id+'/activities');
+      let promise = api.get('/users/'+this.user.id+'/activities');
 
       promise.then((response) => {
         let activities = response.data;
diff --git a/app/javascript/credit_mutations.js b/app/javascript/credit_mutations.js
@@ -1,12 +1,8 @@
 import Vue from 'vue/dist/vue.esm';
-import VueResource from 'vue-resource';
 
 import UserInput from './components/UserInput.vue';
 
-Vue.use(VueResource);
-
 document.addEventListener('turbo:load', () => {
-  Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
 
   const element = document.getElementById('new_mutation_modal');
   if (element != null) {
diff --git a/app/javascript/invoices.js b/app/javascript/invoices.js
@@ -1,10 +1,8 @@
 import Vue from 'vue/dist/vue.esm';
-import VueResource from 'vue-resource';
 
 import UserInput from './components/UserInput.vue';
 import moment from 'moment';
 
-Vue.use(VueResource);
 let vueInstance = null;
 
 document.addEventListener('turbo:before-cache', () => {
@@ -15,7 +13,6 @@ document.addEventListener('turbo:before-cache', () => {
 });
 
 document.addEventListener('turbo:load', () => {
-  Vue.http.headers.common['X-CSRF-TOKEN'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
   const element = document.getElementById('new_invoice_modal');
   if (element != null) {
     const activities = JSON.parse(element.dataset.activities);
diff --git a/app/javascript/order_screen.js b/app/javascript/order_screen.js
@@ -1,18 +1,12 @@
 import Vue from 'vue/dist/vue.esm';
-import VueResource from 'vue-resource';
-import axios from 'axios';
+import api from './api/axiosInstance';
 import * as bootstrap from 'bootstrap';
 
 import FlashNotification from './components/FlashNotification.vue';
 import UserSelection from './components/orderscreen/UserSelection.vue';
 import ActivityOrders from './components/orderscreen/ActivityOrders.vue';
 
-Vue.use(VueResource);
-
 document.addEventListener('turbo:load', () => {
-  const token = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
-  Vue.http.headers.common['X-CSRF-TOKEN'] = token;
-  axios.defaults.headers.common['X-CSRF-Token'] = token;
   const element = document.getElementById('order-screen');
   if (element != null) {
     const users = JSON.parse(element.dataset.users);
@@ -64,8 +58,8 @@ document.addEventListener('turbo:load', () => {
 
           if (user !== null) {
             // Reload user to get latest credit balance
-            this.$http.get(`/users/${user.id}/json?activity_id=${this.activity.id}`).then((response) => {
-              const refreshedUser = response.body;
+            api.get(`/users/${user.id}/json?activity_id=${this.activity.id}`).then((response) => {
+              const refreshedUser = response.data;
               const index = this.users.findIndex((candidate) => candidate.id === refreshedUser.id);
               if (index !== -1) {
                 this.$set(this.users, index, refreshedUser);
@@ -161,15 +155,15 @@ document.addEventListener('turbo:load', () => {
             };
           }
 
-          this.$http.post('/orders', {
+          api.post('/orders', {
             order: order
           }).then((response) => {
-            const user = response.body.user;
-            const orderTotal = this.doubleToCurrency(response.body.order_total);
+            const user = response.data.user;
+            const orderTotal = this.doubleToCurrency(response.data.order_total);
             let additionalInfo;
-            if (response.body.paid_with_pin) {
+            if (response.data.paid_with_pin) {
               additionalInfo = `Pin - ${orderTotal}`;
-            } else if (response.body.paid_with_cash) {
+            } else if (response.data.paid_with_cash) {
               additionalInfo = `Contant - ${orderTotal}`;
             } else {
               additionalInfo = `${user.name} - ${orderTotal}`;
@@ -178,9 +172,9 @@ document.addEventListener('turbo:load', () => {
             if (user) {
               const index = this.users.findIndex((candidate) => candidate.id === user.id);
               if (index !== -1) {
-                this.$set(this.users, index, response.body.user);
+                this.$set(this.users, index, response.data.user);
               } else {
-                this.users.push(response.body.user);
+                this.users.push(response.data.user);
               }
             }
 
@@ -189,14 +183,14 @@ document.addEventListener('turbo:load', () => {
               this.setUser(null);
             } else {
               // re-set user to update credit
-              this.setUser(response.body.user);
+              this.setUser(response.data.user);
               this.orderRows = [];
             }
 
             this.isSubmitting = false;
 
             if (openWithSumup) {
-              this.startSumupPayment(response.body.id, response.body.order_total);
+              this.startSumupPayment(response.data.id, response.data.order_total);
             }
           }, (response) => {
             this.handleXHRError(response);
@@ -210,7 +204,7 @@ document.addEventListener('turbo:load', () => {
             this.sendFlash('Server error!', 'Herlaad de pagina', 'error');
 
             try {
-              throw new Error(JSON.stringify(error.body));
+              throw new Error(JSON.stringify(error.response.data));
             } catch(e) {
               /* eslint-disable no-undef */
               Sentry.captureException(e);
@@ -246,7 +240,7 @@ document.addEventListener('turbo:load', () => {
         deleteOrder(orderId) {
           bootstrap.Modal.getOrCreateInstance('#sumup-error-order-modal').hide();
 
-          this.$http.delete(`/orders/${orderId}`).then(() => {
+          api.delete(`/orders/${orderId}`).then(() => {
             this.sendFlash('Pin bestelling verwijderd.', '', 'success');
             this.$refs.activityOrders.refresh();
           }, (response) => {
@@ -343,25 +337,25 @@ document.addEventListener('turbo:load', () => {
             return;
           }
 
-          app.$http.post('/credit_mutations', {
+          api.post('/credit_mutations', {
             credit_mutation: {
               user_id: app.selectedUser.id,
               activity_id: app.activity.id,
               description: this.creditMutationDescription,
               amount: this.creditMutationAmount
             }
           }).then((response) => {
-            const index = app.users.findIndex((candidate) => candidate.id === response.body.user.id);
+            const index = app.users.findIndex((candidate) => candidate.id === response.data.user.id);
             if (index !== -1) {
-              app.$set(app.users, index, response.body.user);
+              app.$set(app.users, index, response.data.user);
             } else {
-              app.users.push(response.body.user);
+              app.users.push(response.data.user);
             }
             if(!app.keepUserSelected && app.orderRows.length === 0){
               app.setUser(null);
             } else {
               // re-set user to update credit
-              app.setUser(response.body.user);
+              app.setUser(response.data.user);
             }
 
             bootstrap.Modal.getOrCreateInstance('#credit-mutation-modal').hide();
@@ -370,7 +364,7 @@ document.addEventListener('turbo:load', () => {
             this.creditMutationAmount = null;
             this.creditMutationDescription = 'Inleg contant';
 
-            const additionalInfo = `${response.body.user.name} - ${app.doubleToCurrency(response.body.amount)}`;
+            const additionalInfo = `${response.data.user.name} - ${app.doubleToCurrency(response.data.amount)}`;
             app.sendFlash('Inleg opgeslagen.', additionalInfo, 'success');
             this.isSubmitting = false;
 
diff --git a/app/javascript/payment_add.js b/app/javascript/payment_add.js
@@ -1,8 +1,6 @@
 import Vue from 'vue/dist/vue.esm';
-import axios from 'axios';
 
 document.addEventListener('turbo:load', () => {
-  axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
 
   const element = document.getElementById('payment-add');
   if (element !== null) {
diff --git a/app/javascript/price_lists.js b/app/javascript/price_lists.js
diff --git a/app/javascript/user.js b/app/javascript/user.js
diff --git a/app/javascript/users.js b/app/javascript/users.js
diff --git a/app/views/activities/_modal.html.erb b/app/views/activities/_modal.html.erb
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
