Re-use getEndpoint utility function (#16700)

* re-use getEndpoint util

* rename endpoint var to route in calendar layout

* move loading below early return statements

app/src/composables/use-template-data.ts

@@ -1,7 +1,7 @@
 import api from '@/api';
 import { Collection } from '@/types/collections';
 import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
-import { getFieldsFromTemplate } from '@directus/shared/utils';
+import { getEndpoint, getFieldsFromTemplate } from '@directus/shared/utils';
 import { computed, Ref, ref, watch } from 'vue';
 
 type UsableTemplateData = {
@@ -32,9 +32,11 @@ export function useTemplateData(collection: Ref<Collection | null>, primaryKey:
 
 		loading.value = true;
 
+		const baseEndpoint = getEndpoint(collection.value.collection);
+
 		const endpoint = collection.value.collection.startsWith('directus_')
-			? `/${collection.value.collection.substring(9)}/${primaryKey.value}`
-			: `/items/${collection.value.collection}/${encodeURIComponent(primaryKey.value)}`;
+			? `${baseEndpoint}/${primaryKey.value}`
+			: `${baseEndpoint}/${encodeURIComponent(primaryKey.value)}`;
 
 		try {
 			const result = await api.get(endpoint, {

app/src/layouts/calendar/index.ts

@@ -8,7 +8,7 @@ import { syncRefProperty } from '@/utils/sync-ref-property';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { useCollection, useItems, useSync } from '@directus/shared/composables';
 import { Field, Item } from '@directus/shared/types';
-import { defineLayout, getFieldsFromTemplate } from '@directus/shared/utils';
+import { defineLayout, getEndpoint, getFieldsFromTemplate } from '@directus/shared/utils';
 import { Calendar, CalendarOptions as FullCalendarOptions, EventInput } from '@fullcalendar/core';
 import dayGridPlugin from '@fullcalendar/daygrid';
 import interactionPlugin from '@fullcalendar/interaction';
@@ -166,11 +166,11 @@ export default defineLayout<LayoutOptions>({
 					} else {
 						const primaryKey = info.event.id;
 
-						const endpoint = collection.value.startsWith('directus')
+						const route = collection.value.startsWith('directus_')
 							? collection.value.substring(9)
 							: `content/${collection.value}`;
 
-						router.push(`/${endpoint}/${primaryKey}`);
+						router.push(`/${route}/${primaryKey}`);
 					}
 				},
 				async eventChange(info) {
@@ -184,9 +184,7 @@ export default defineLayout<LayoutOptions>({
 						itemChanges[endDateField.value] = adjustForType(info.event.endStr, endDateFieldInfo.value.type);
 					}
 
-					const endpoint = collection.value.startsWith('directus')
-						? collection.value.substring(9)
-						: `/items/${collection.value}`;
+					const endpoint = getEndpoint(collection.value);
 
 					try {
 						await api.patch(`${endpoint}/${info.event.id}`, itemChanges);

app/src/views/private/components/drawer-batch.vue

@@ -30,6 +30,7 @@ import api from '@/api';
 import { VALIDATION_TYPES } from '@/constants';
 import { APIError } from '@/types/error';
 import { unexpectedError } from '@/utils/unexpected-error';
+import { getEndpoint } from '@directus/shared/utils';
 
 export default defineComponent({
 	props: {
@@ -104,19 +105,13 @@ export default defineComponent({
 			const saving = ref(false);
 			const validationErrors = ref([]);
 
-			const endpoint = computed(() => {
-				return collection.value.startsWith('directus_')
-					? `/${collection.value.substring(9)}`
-					: `/items/${collection.value}`;
-			});
-
 			return { save, cancel, saving, validationErrors };
 
 			async function save() {
 				saving.value = true;
 
 				try {
-					await api.patch(endpoint.value, {
+					await api.patch(getEndpoint(collection.value), {
 						keys: props.primaryKeys,
 						data: internalEdits.value,
 					});

app/src/views/private/components/drawer-item.vue

@@ -95,6 +95,7 @@ import { Field, Relation } from '@directus/shared/types';
 import { getDefaultValuesFromFields } from '@/utils/get-default-values-from-fields';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useRouter } from 'vue-router';
+import { getEndpoint } from '@directus/shared/utils';
 
 interface Props {
 	collection: string;
@@ -269,6 +270,7 @@ function useItem() {
 	const internalEdits = ref<Record<string, any>>({});
 	const loading = ref(false);
 	const initialValues = ref<Record<string, any> | null>(null);
+	const baseEndpoint = getEndpoint(props.collection);
 
 	watch(
 		() => props.active,
@@ -289,13 +291,13 @@ function useItem() {
 	return { internalEdits, loading, initialValues, fetchItem };
 
 	async function fetchItem() {
-		loading.value = true;
-
 		if (!props.primaryKey) return;
 
+		loading.value = true;
+
 		const endpoint = props.collection.startsWith('directus_')
-			? `/${props.collection.substring(9)}/${props.primaryKey}`
-			: `/items/${props.collection}/${encodeURIComponent(props.primaryKey)}`;
+			? `${baseEndpoint}/${props.primaryKey}`
+			: `${baseEndpoint}/${encodeURIComponent(props.primaryKey)}`;
 
 		let fields = '*';
 
@@ -315,15 +317,15 @@ function useItem() {
 	}
 
 	async function fetchRelatedItem() {
-		loading.value = true;
-
 		const collection = relatedCollection.value;
 
 		if (!collection || !junctionFieldInfo.value) return;
 
+		loading.value = true;
+
 		const endpoint = collection.startsWith('directus_')
-			? `/${collection.substring(9)}/${props.relatedPrimaryKey}`
-			: `/items/${collection}/${encodeURIComponent(props.relatedPrimaryKey)}`;
+			? `${baseEndpoint}/${props.relatedPrimaryKey}`
+			: `${baseEndpoint}/${encodeURIComponent(props.relatedPrimaryKey)}`;
 
 		try {
 			const response = await api.get(endpoint);

app/src/views/private/components/export-sidebar-detail.vue

@@ -474,10 +474,10 @@ function startExport() {
 }
 
 function exportDataLocal() {
-	const endpoint = collection.value.startsWith('directus_')
-		? `${collection.value.substring(9)}`
-		: `items/${collection.value}`;
-	const url = getPublicURL() + endpoint;
+	const endpoint = getEndpoint(collection.value);
+
+	// usually getEndpoint contains leading slash, but here we need to remove it
+	const url = getPublicURL() + endpoint.substring(1);
 
 	let params: Record<string, unknown> = {
 		access_token: api.defaults.headers.common['Authorization'].substring(7),

packages/shared/src/composables/use-items.ts

@@ -2,7 +2,7 @@ import { useApi } from './use-system';
 import axios from 'axios';
 import { useCollection } from './use-collection';
 import { Item, Query } from '../types';
-import { moveInArray } from '../utils';
+import { getEndpoint, moveInArray } from '../utils';
 import { isEqual, throttle } from 'lodash';
 import { computed, ComputedRef, ref, Ref, watch, WritableComputedRef, unref } from 'vue';
 
@@ -42,9 +42,7 @@ export function useItems(collection: Ref<string | null>, query: ComputedQuery):
 
 	const endpoint = computed(() => {
 		if (!collection.value) return null;
-		return collection.value.startsWith('directus_')
-			? `/${collection.value.substring(9)}`
-			: `/items/${collection.value}`;
+		return getEndpoint(collection.value);
 	});
 
 	const items = ref<Item[]>([]);