Fixed: Keep page when opening payment sidebar

resources/js/mixins/mergesQueryString.js

@@ -1,4 +1,5 @@
 import queryString from 'query-string';
+import merge from 'merge';
 
 export default {
     methods: {
@@ -17,6 +18,23 @@ export default {
             var merged = queryString.stringify(mn);
 
             return window.location.pathname + (merged ? '?'+merged : '');
+        },
+
+        query(options) {
+            options = merge({
+                only: null,
+            }, options);
+            var c = queryString.parse(window.location.search);
+
+            if (options.only !== null) {
+                for (var k in c) {
+                    if (options.only.indexOf(k) < 0) {
+                        delete c[k];
+                    }
+                }
+            }
+
+            return Object.keys(c).length === 0 ? '' : `?${queryString.stringify(c)}`;
         }
     }
 };

resources/js/views/member/Index.vue

@@ -46,7 +46,7 @@
                 <div v-text="`${member.joined_at_human}`"></div>
                 <div class="flex">
                     <inertia-link :href="`/member/${member.id}/edit`" class="inline-flex btn btn-warning btn-sm"><sprite src="pencil"></sprite></inertia-link>
-                    <inertia-link :href="`/member/${member.id}/payment`" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></inertia-link>
+                    <inertia-link :href="`/member/${member.id}/payment${query({only: ['page']})}`" class="inline-flex btn btn-info btn-sm"><sprite src="money"></sprite></inertia-link>
                     <inertia-link href="#" @click.prevent="remove(member)" class="inline-flex btn btn-danger btn-sm"><sprite src="trash"></sprite></inertia-link>
                 </div>
             </div>
@@ -69,11 +69,14 @@
 import App from '../../layouts/App';
 import Payments from './Payments.vue';
 import PaymentForm from './PaymentForm.vue';
+import mergesQueryString from '../../mixins/mergesQueryString.js';
 
 export default {
 
     layout: App,
 
+    mixins: [mergesQueryString],
+
     components: { Payments, PaymentForm },
 
     methods: {