add filters and sorting to projects table

resources/js/utils/useProjects.ts

@@ -9,10 +9,16 @@ import type {
 } from '@/packages/api/src';
 import { getCurrentOrganizationId } from '@/utils/useUser';
 import { useNotificationsStore } from '@/utils/notification';
+import { useQueryClient } from '@tanstack/vue-query';
 
 export const useProjectsStore = defineStore('projects', () => {
     const projectResponse = ref<ProjectResponse | null>(null);
     const { handleApiRequestNotifications } = useNotificationsStore();
+    const queryClient = useQueryClient();
+
+    function invalidateProjectsQuery() {
+        queryClient.invalidateQueries({ queryKey: ['projects'] });
+    }
     async function fetchProjects() {
         const organization = getCurrentOrganizationId();
         if (organization) {
@@ -48,6 +54,7 @@ export const useProjectsStore = defineStore('projects', () => {
             );
 
             await fetchProjects();
+            invalidateProjectsQuery();
             return response['data'];
         }
     }
@@ -67,6 +74,7 @@ export const useProjectsStore = defineStore('projects', () => {
                 'Failed to delete project'
             );
             await fetchProjects();
+            invalidateProjectsQuery();
         }
     }
 
@@ -85,6 +93,7 @@ export const useProjectsStore = defineStore('projects', () => {
                 'Failed to update project'
             );
             await fetchProjects();
+            invalidateProjectsQuery();
         }
     }
 

resources/js/utils/useProjectsQuery.ts

@@ -0,0 +1,34 @@
+import { useQuery, useQueryClient } from '@tanstack/vue-query';
+import { api } from '@/packages/api/src';
+import { getCurrentOrganizationId } from '@/utils/useUser';
+import type { Project } from '@/packages/api/src';
+import { computed } from 'vue';
+
+export function useProjectsQuery() {
+    const queryClient = useQueryClient();
+
+    const query = useQuery({
+        queryKey: ['projects'],
+        queryFn: async () => {
+            const organizationId = getCurrentOrganizationId();
+            if (!organizationId) throw new Error('No organization');
+            return api.getProjects({
+                params: { organization: organizationId },
+                queries: { archived: 'all' },
+            });
+        },
+        enabled: () => !!getCurrentOrganizationId(),
+    });
+
+    const projects = computed<Project[]>(() => query.data.value?.data ?? []);
+
+    const invalidateProjects = () => {
+        queryClient.invalidateQueries({ queryKey: ['projects'] });
+    };
+
+    return {
+        ...query,
+        projects,
+        invalidateProjects,
+    };
+}