From 1ac30202b170e5023e26ae60acba1224aab61d1e Mon Sep 17 00:00:00 2001 From: philipp lang Date: Thu, 27 Jul 2023 17:22:06 +0200 Subject: [PATCH] Add composable for index --- resources/js/app.js | 1 + resources/js/components/page/Layout.vue | 2 +- resources/js/composables/useIndex.js | 85 +++++++++ resources/js/mixins/indexHelpers.js | 60 ------- resources/js/views/activity/VIndex.vue | 53 +++--- .../maildispatcher/MaildispatcherForm.vue | 93 +++++----- resources/js/views/mailgateway/Index.vue | 81 ++++----- resources/js/views/member/VIndex.vue | 163 ++++++++---------- 8 files changed, 262 insertions(+), 276 deletions(-) create mode 100644 resources/js/composables/useIndex.js delete mode 100644 resources/js/mixins/indexHelpers.js diff --git a/resources/js/app.js b/resources/js/app.js index 26e7d93b..8560aaa6 100644 --- a/resources/js/app.js +++ b/resources/js/app.js @@ -51,6 +51,7 @@ createInertiaApp({ requireModules(import.meta.glob('./components/ui/*.vue'), app, 'ui'); requireModules(import.meta.glob('./components/page/*.vue', {eager: true}), app, 'page'); + app.provide('axios', app.config.globalProperties.axios); app.mount(el); }, }); diff --git a/resources/js/components/page/Layout.vue b/resources/js/components/page/Layout.vue index f23445ac..f2b578b9 100644 --- a/resources/js/components/page/Layout.vue +++ b/resources/js/components/page/Layout.vue @@ -3,7 +3,7 @@ diff --git a/resources/js/composables/useIndex.js b/resources/js/composables/useIndex.js new file mode 100644 index 00000000..ad3a6f7a --- /dev/null +++ b/resources/js/composables/useIndex.js @@ -0,0 +1,85 @@ +import {ref, computed} from 'vue'; +import {router} from '@inertiajs/vue3'; + +export function useIndex(props) { + const rawProps = JSON.parse(JSON.stringify(props)); + const inner = { + data: ref(rawProps.data), + meta: ref(rawProps.meta), + }; + + function toFilterString(data) { + return btoa(encodeURIComponent(JSON.stringify(data))); + } + + const filterString = computed(() => toFilterString(inner.meta.value.filter)); + + function reload(resetPage = true) { + var data = { + filter: filterString.value, + page: 1, + }; + + data['page'] = resetPage ? 1 : inner.meta.value.current_page; + + router.visit(window.location.pathname, { + data, + preserveState: true, + onSuccess: (page) => { + inner.data.value = page.props.data.data; + inner.meta.value = page.props.data.meta; + }, + }); + } + + function can(permission) { + return inner.meta.value.can[permission]; + } + + function getFilter(value) { + return inner.meta.value.filter[value]; + } + + function setFilter(key, value) { + inner.meta.value.filter[key] = value; + reload(); + } + + function requestCallback(successMessage, failureMessage) { + return { + onSuccess: () => { + this.$success(successMessage); + reload(false); + }, + onFailure: () => { + this.$error(failureMessage); + reload(false); + }, + preserveState: true, + }; + } + + return { + data: inner.data, + reload, + can, + getFilter, + setFilter, + requestCallback, + meta: inner.meta, + filterString, + router, + toFilterString, + }; +} + +const indexProps = { + data: { + default: () => { + return {data: [], meta: {}}; + }, + type: Object, + }, +}; + +export {indexProps}; diff --git a/resources/js/mixins/indexHelpers.js b/resources/js/mixins/indexHelpers.js deleted file mode 100644 index 3148d654..00000000 --- a/resources/js/mixins/indexHelpers.js +++ /dev/null @@ -1,60 +0,0 @@ -export default { - data: function () { - return { - inner: {...this.data}, - }; - }, - props: { - data: {}, - }, - computed: { - filterString() { - return this.toFilterString(this.inner.meta.filter); - }, - }, - methods: { - toFilterString(data) { - return btoa(encodeURIComponent(JSON.stringify(data))); - }, - reload(resetPage = true) { - var _self = this; - var data = { - filter: this.filterString, - page: 1, - }; - - data['page'] = resetPage ? 1 : this.inner.meta.current_page; - - this.$inertia.visit(window.location.pathname, { - data, - preserveState: true, - onSuccess(page) { - _self.inner = page.props.data; - }, - }); - }, - can(permission) { - return this.inner.meta.can[permission]; - }, - getFilter(value) { - return this.inner.meta.filter[value]; - }, - setFilter(key, value) { - this.inner.meta.filter[key] = value; - this.reload(); - }, - requestCallback(successMessage, failureMessage) { - return { - onSuccess: () => { - this.$success(successMessage); - this.reload(false); - }, - onFailure: () => { - this.$error(failureMessage); - this.reload(false); - }, - preserveState: true, - }; - }, - }, -}; diff --git a/resources/js/views/activity/VIndex.vue b/resources/js/views/activity/VIndex.vue index 4df9ad35..666656dd 100644 --- a/resources/js/views/activity/VIndex.vue +++ b/resources/js/views/activity/VIndex.vue @@ -1,14 +1,14 @@ - diff --git a/resources/js/views/maildispatcher/MaildispatcherForm.vue b/resources/js/views/maildispatcher/MaildispatcherForm.vue index 2ea4ef76..166f6557 100644 --- a/resources/js/views/maildispatcher/MaildispatcherForm.vue +++ b/resources/js/views/maildispatcher/MaildispatcherForm.vue @@ -9,60 +9,60 @@
- - + +
- +
- + @@ -80,49 +80,46 @@ - + - diff --git a/resources/js/views/mailgateway/Index.vue b/resources/js/views/mailgateway/Index.vue index 22414a48..2d4c5d4c 100644 --- a/resources/js/views/mailgateway/Index.vue +++ b/resources/js/views/mailgateway/Index.vue @@ -1,44 +1,44 @@ - diff --git a/resources/js/views/member/VIndex.vue b/resources/js/views/member/VIndex.vue index cbd5d99d..9c103047 100644 --- a/resources/js/views/member/VIndex.vue +++ b/resources/js/views/member/VIndex.vue @@ -1,63 +1,63 @@ -