move to composable

Author: irabbi360

resources/js/composables/activityLogs.js

@@ -0,0 +1,80 @@
+import {ref, inject, computed} from 'vue'
+import {useRoute, useRouter} from "vue-router";
+import axios from "axios";
+
+export default function useActivityLogs() {
+    const route = useRoute();
+    const router = useRouter();
+
+    const activities = ref();
+    const activeFilter = ref(route.query.filter || 'all');
+    const searchTerm = ref(route.query.search || '');
+    // Pagination
+    const currentPage = ref(parseInt(route.query.page) || 1); // Current page
+    const perPage = ref(15); // Items per page
+    const total = ref(0); // Total number of items
+
+    // Pagination Helpers
+    const totalPages = computed(() => Math.ceil(total.value / perPage.value));
+    const rangeStart = computed(() => (currentPage.value - 1) * perPage.value + 1);
+    const rangeEnd = computed(() =>
+        Math.min(currentPage.value * perPage.value, total.value)
+    );
+
+    const isLoading = ref(false)
+
+    const getActivityLogs = (() => {
+        const params = {
+            filter: activeFilter.value !== 'all' ? activeFilter.value : undefined,
+            search: searchTerm.value || undefined,
+            page: currentPage.value,
+            per_page: perPage.value,
+        };
+
+        axios.get(`/api/activity-logs/`, { params })
+            .then(({data}) => {
+                activities.value = data;
+                total.value = data.meta.total
+            })
+    });
+
+    const changePage = (page) => {
+        if (page >= 1 && page <= totalPages.value) {
+            currentPage.value = page;
+            applyFilters();
+        }
+    };
+
+    const updateFilter = (filter) => {
+        activeFilter.value = filter;
+        applyFilters();
+    };
+
+    const applyFilters = () => {
+        setTimeout(() => {
+            router.push({
+                query: {
+                    filter: activeFilter.value !== 'all' ? activeFilter.value : undefined,
+                    search: searchTerm.value || undefined,
+                    page: currentPage.value,
+                },
+            });
+        }, 300)
+    };
+
+    return {
+        getActivityLogs,
+        activities,
+        activeFilter,
+        isLoading,
+        rangeStart,
+        rangeEnd,
+        total,
+        currentPage,
+        totalPages,
+        changePage,
+        updateFilter,
+        searchTerm,
+        applyFilters,
+    }
+}

resources/js/views/admin/activity-log/Index.vue

@@ -144,81 +144,26 @@
 </template>
 
 <script setup>
-import axios from 'axios';
-import {ref, onMounted, watch, computed} from 'vue'
-import {useRoute, useRouter} from "vue-router";
+import {watch} from 'vue'
+import {useRoute} from "vue-router";
+import useActivityLogs from '@/composables/activityLogs.js'
 
-const route = useRoute();
-const router = useRouter();
-const activities = ref();
-const activeFilter = ref(route.query.filter || 'all');
-const searchTerm = ref(route.query.search || '');
-
-// Pagination
-const currentPage = ref(parseInt(route.query.page) || 1); // Current page
-const perPage = ref(15); // Items per page
-const total = ref(0); // Total number of items
-
-// Pagination Helpers
-const totalPages = computed(() => Math.ceil(total.value / perPage.value));
-const rangeStart = computed(() => (currentPage.value - 1) * perPage.value + 1);
-const rangeEnd = computed(() =>
-    Math.min(currentPage.value * perPage.value, total.value)
-);
-
-const loadActivityLogs = (() => {
-    const params = {
-        filter: activeFilter.value !== 'all' ? activeFilter.value : undefined,
-        search: searchTerm.value || undefined,
-        page: currentPage.value,
-        per_page: perPage.value,
-    };
+const {activities, getActivityLogs, activeFilter, searchTerm, currentPage, rangeStart, rangeEnd, totalPages, total, updateFilter, applyFilters, changePage} = useActivityLogs()
 
-    axios.get(`/api/activity-logs/`, { params })
-        .then(({data}) => {
-            activities.value = data;
-            total.value = data.meta.total
-        })
-});
-
-// Update query parameters and refetch data when page changes
-const changePage = (page) => {
-    if (page >= 1 && page <= totalPages.value) {
-        currentPage.value = page;
-        applyFilters();
-    }
-};
-
-const updateFilter = (filter) => {
-    activeFilter.value = filter;
-    applyFilters();
-};
-
-const applyFilters = () => {
-    router.push({
-        query: {
-            filter: activeFilter.value !== 'all' ? activeFilter.value : undefined,
-            search: searchTerm.value || undefined,
-            page: currentPage.value,
-        },
-    });
-};
+const route = useRoute();
 
 watch(
     () => route.query,
     (newQuery) => {
         activeFilter.value = newQuery?.filter || 'all';
         searchTerm.value = newQuery?.search || '';
         currentPage.value = parseInt(newQuery.page) || 1;
-        loadActivityLogs(activeFilter.value)
+        getActivityLogs()
     },
     {
         deep: true,
         immediate: true
     }
 );
 
-onMounted(() => {
-    loadActivityLogs()
-})
 </script>