use tanstack query in ProjectMultiselectDropdown, ClientTableRow and ProjectDropdown; fix e2e

e2e/reporting.spec.ts

@@ -125,8 +125,8 @@ test('test that project filtering works in reporting', async ({ page }) => {
 
     // Go to reporting and filter by project1
     await goToReporting(page);
-    await page.getByRole('button', { name: 'Project' }).nth(0).click();
+    await page.getByRole('button', { name: 'Projects' }).click();
-    await page.getByRole('dialog').getByText(project1).click();
+    await page.getByRole('option').filter({ hasText: project1 }).click();
 
     await Promise.all([
         // escape

e2e/timetracker.spec.ts

@@ -218,6 +218,11 @@ test('test that adding a new tag works', async ({ page }) => {
         page.getByRole('button', { name: 'Create Tag' }).click(),
     ]);
 
+    // Wait for tags query refetch after invalidation
+    await page.waitForResponse(
+        (response) => response.url().includes('/tags') && response.status() === 200
+    );
+
     await page.getByTestId('tag_dropdown').click();
     await expect(page.getByRole('option', { name: newTagName })).toBeVisible();
 });

resources/js/Components/Common/Client/ClientTableRow.vue

@@ -3,13 +3,12 @@ import type { Client } from '@/packages/api/src';
 import { computed, ref } from 'vue';
 import { CheckCircleIcon } from '@heroicons/vue/20/solid';
 import { useClientsStore } from '@/utils/useClients';
-import { storeToRefs } from 'pinia';
 import ClientMoreOptionsDropdown from '@/Components/Common/Client/ClientMoreOptionsDropdown.vue';
-import { useProjectsStore } from '@/utils/useProjects';
+import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import TableRow from '@/Components/TableRow.vue';
 import ClientEditModal from '@/Components/Common/Client/ClientEditModal.vue';
 
-const { projects } = storeToRefs(useProjectsStore());
+const { projects } = useProjectsQuery();
 
 const props = defineProps<{
     client: Client;

resources/js/Components/Common/Project/ProjectDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import ProjectBadge from '@/packages/ui/src/Project/ProjectBadge.vue';
 import { computed, nextTick, ref, watch } from 'vue';
-import { useProjectsStore } from '@/utils/useProjects';
+import { useProjectsQuery } from '@/utils/useProjectsQuery';
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
 import {
     ComboboxAnchor,
@@ -12,7 +12,6 @@ import {
     ComboboxViewport,
 } from 'radix-vue';
 import { PlusCircleIcon } from '@heroicons/vue/20/solid';
-import { storeToRefs } from 'pinia';
 import { api } from '@/packages/api/src';
 import { usePage } from '@inertiajs/vue3';
 import { getRandomColor } from '@/packages/ui/src/utils/color';
@@ -26,13 +25,14 @@ const model = defineModel<string | null>({
     default: null,
 });
 const open = ref(false);
-const projectsStore = useProjectsStore();
+const { projects, invalidateProjects } = useProjectsQuery();
 const emit = defineEmits(['update:modelValue', 'changed']);
 
-const { projects } = storeToRefs(projectsStore);
 const projectDropdownTrigger = ref<HTMLElement | null>(null);
+const sortedProjects = ref<Project[]>([]);
+
 const shownProjects = computed(() => {
-    return projects.value.filter((project) => {
+    return sortedProjects.value.filter((project) => {
         return project.name.toLowerCase().includes(searchValue.value?.toLowerCase()?.trim() || '');
     });
 });
@@ -64,7 +64,7 @@ async function addProjectIfNoneExists() {
             },
             { params: { organization: page.props.auth.user.current_team_id } }
         );
-        projects.value.unshift(response.data);
+        invalidateProjects();
         model.value = response.data.id;
         searchValue.value = '';
         open.value = false;
@@ -78,7 +78,7 @@ watch(open, (isOpen) => {
             searchInput.value?.$el?.focus();
         });
 
-        projects.value.sort((iteratingProject) => {
+        sortedProjects.value = [...projects.value].sort((iteratingProject) => {
             return model.value === iteratingProject.id ? -1 : 1;
         });
     }

resources/js/Components/Common/Project/ProjectMultiselectDropdown.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
 import MultiselectDropdown from '@/packages/ui/src/Input/MultiselectDropdown.vue';
-import { storeToRefs } from 'pinia';
+import { useProjectsQuery } from '@/utils/useProjectsQuery';
-import { useProjectsStore } from '@/utils/useProjects';
 import type { Project } from '@/packages/api/src';
 
-const projectsStore = useProjectsStore();
+const { projects } = useProjectsQuery();
-const { projects } = storeToRefs(projectsStore);
 
 function getKeyFromItem(item: Project) {
     return item.id;