Merge branch 'ref/318/query-composables' into fix/homeselector-loading

src/components/CreateAdministration.vue

@@ -170,6 +170,7 @@ import { onMounted, reactive, ref, toRaw, computed, watch } from 'vue';
 import { useRouter } from 'vue-router';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
+import { useConfirm } from 'primevue/useconfirm';
 import { useQuery } from '@tanstack/vue-query';
 import _filter from 'lodash/filter';
 import _isEmpty from 'lodash/isEmpty';
@@ -184,13 +185,12 @@ import _groupBy from 'lodash/groupBy';
 import _values from 'lodash/values';
 import { useVuelidate } from '@vuelidate/core';
 import { required, requiredIf } from '@vuelidate/validators';
-import { useAuthStore } from '@/store/auth';
-import OrgPicker from '@/components/OrgPicker.vue';
 import { fetchDocById, fetchDocsById } from '@/helpers/query/utils';
-import { variantsFetcher } from '@/helpers/query/tasks';
+import { useAuthStore } from '@/store/auth';
+import useAdministrationVariantsQuery from '@/composables/queries/useAdministrationVariantsQuery';
 import TaskPicker from './TaskPicker.vue';
-import { useConfirm } from 'primevue/useconfirm';
 import ConsentPicker from './ConsentPicker.vue';
+import OrgPicker from '@/components/OrgPicker.vue';
 
 const isLevante = import.meta.env.MODE === 'LEVANTE';
 
@@ -229,12 +229,8 @@ const confirm = useConfirm();
 const authStore = useAuthStore();
 const { roarfirekit, administrationQueryKeyIndex } = storeToRefs(authStore);
 
-const { data: allVariants } = useQuery({
-  queryKey: ['variants', 'all'],
-  queryFn: () => variantsFetcher(true),
-  keepPreviousData: true,
+const { data: allVariants } = useAdministrationVariantsQuery(true, {
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 //      +------------------------------------------+

src/components/tasks/ManageVariants.vue

@@ -438,13 +438,13 @@
 import { computed, onMounted, reactive, ref, watch } from 'vue';
 import { required } from '@vuelidate/validators';
 import { useVuelidate } from '@vuelidate/core';
-import { useAuthStore } from '@/store/auth';
 import { useQuery, useQueryClient } from '@tanstack/vue-query';
 import { storeToRefs } from 'pinia';
 import { useToast } from 'primevue/usetoast';
-import { taskFetcher } from '@/helpers/query/tasks';
-import { variantsFetcher } from '../../helpers/query/tasks';
 import { cloneDeep, camelCase } from 'lodash';
+import { useAuthStore } from '@/store/auth';
+import { taskFetcher } from '@/helpers/query/tasks';
+import useAdministrationVariantsQuery from '@/composables/queries/useAdministrationVariantsQuery';
 
 const toast = useToast();
 const initialized = ref(false);
@@ -514,12 +514,8 @@ const { isFetching: isFetchingTasks, data: tasks } = useQuery({
   staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
-const { data: allVariants } = useQuery({
-  queryKey: ['variants', 'all'],
-  queryFn: () => variantsFetcher(),
-  keepPreviousData: true,
+const { data: allVariants } = useAdministrationVariantsQuery({
   enabled: initialized,
-  staleTime: 5 * 60 * 1000, // 5 minutes
 });
 
 const formattedTasks = computed(() => {

src/composables/queries/useAdministrationVariantsQuery.js

@@ -0,0 +1,26 @@
+import { useQuery } from '@tanstack/vue-query';
+import { variantsFetcher } from '@/helpers/query/tasks';
+import { ADMINITRATION_VARIANTS_QUERY_KEY } from '@/constants/queryKeys';
+
+/**
+ * Administration Variants query.
+ *
+ * @TODO: Consider separating into two queries, one for registered variants and one for all variants.
+ * @TODO: Consider moving the "registered" query key to a constant.
+ *
+ * @param {QueryOptions|undefined} queryOptions – Optional TanStack query options.
+ * @returns {UseQueryResult} The TanStack query result.
+ */
+const useAdministrationVariantsQuery = (registeredVariantsOnly = false, queryOptions = undefined) => {
+  const queryKey = registeredVariantsOnly
+    ? [ADMINITRATION_VARIANTS_QUERY_KEY, 'registered']
+    : ADMINITRATION_VARIANTS_QUERY_KEY;
+
+  return useQuery({
+    queryKey,
+    queryFn: () => variantsFetcher(registeredVariantsOnly),
+    ...queryOptions,
+  });
+};
+
+export default useAdministrationVariantsQuery;

src/constants/queryKeys.js

@@ -3,3 +3,4 @@ export const USER_STUDENT_DATA_QUERY_KEY = 'user-student';
 export const USER_CLAIMS_QUERY_KEY = 'user-claims';
 export const LEGAL_DOCS_QUERY_KEY = 'legal-docs';
 export const DSGF_ORGS_QUERY_KEY = 'dsgf-orgs';
+export const ADMINITRATION_VARIANTS_QUERY_KEY = 'administration-variants';