Fix "Auto Refresh" for Kanban and Calendar layouts (#22280)

.changeset/twelve-owls-tickle.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed "Auto Refresh" for Kanban and Calendar layouts

app/src/layouts/calendar/calendar.vue

@@ -10,6 +10,8 @@ interface Props {
 	createCalendar: (calendarElement: HTMLElement) => void;
 	destroyCalendar: () => void;
 	itemCount?: number;
+	resetPresetAndRefresh: () => Promise<void>;
+	error?: any;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,7 +45,8 @@ export default defineComponent({
 		<v-notice v-if="atLimit" type="warning">
 			{{ t('dataset_too_large_currently_showing_n_items', { n: n(10000) }) }}
 		</v-notice>
-		<div ref="calendarElement" />
+		<div v-if="!error" ref="calendarElement" />
+		<slot v-else name="error" :error="error" :reset="resetPresetAndRefresh" />
 	</div>
 </template>
 

app/src/layouts/calendar/index.ts

@@ -254,9 +254,20 @@ export default defineLayout<LayoutOptions>({
 			showingCount,
 			createCalendar,
 			destroyCalendar,
+			resetPresetAndRefresh,
+			refresh,
 			download,
 		};
 
+		async function resetPresetAndRefresh() {
+			await props?.resetPreset?.();
+			refresh();
+		}
+
+		function refresh() {
+			getItems();
+		}
+
 		function download() {
 			if (!collection.value) return;
 			saveAsCSV(collection.value, queryFields.value, items.value);

app/src/layouts/cards/cards.vue

@@ -138,18 +138,7 @@ watch(innerWidth, (value) => {
 			</div>
 		</template>
 
-		<v-info v-else-if="error" type="danger" :title="t('unexpected_error')" icon="error" center>
-			{{ t('unexpected_error_copy') }}
-
-			<template #append>
-				<v-error :error="error" />
-
-				<v-button small class="reset-preset" @click="resetPresetAndRefresh">
-					{{ t('reset_page_preferences') }}
-				</v-button>
-			</template>
-		</v-info>
-
+		<slot v-else-if="error" name="error" :error="error" :reset="resetPresetAndRefresh" />
 		<slot v-else-if="itemCount === 0 && (filter || search)" name="no-results" />
 		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
@@ -198,8 +187,4 @@ watch(innerWidth, (value) => {
 		}
 	}
 }
-
-.reset-preset {
-	margin-top: 24px;
-}
 </style>

app/src/layouts/kanban/index.ts

@@ -127,20 +127,24 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			groupTitleFields,
 			groupsCollection,
 			changeGroupSort,
+			getGroups,
 			addGroup,
 			editGroup,
 			deleteGroup,
 			isRelational,
 		} = useGrouping();
 
-		const { items, loading, error, totalPages, itemCount, totalCount, changeManualSort } = useItems(collection, {
-			sort,
-			limit,
-			page,
-			fields,
-			filter,
-			search,
-		});
+		const { items, loading, error, totalPages, itemCount, totalCount, changeManualSort, getItems } = useItems(
+			collection,
+			{
+				sort,
+				limit,
+				page,
+				fields,
+				filter,
+				search,
+			},
+		);
 
 		const limitWarning = computed(() => items.value.length >= limit.value);
 
@@ -250,6 +254,8 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			showUngrouped,
 			limitWarning,
 			userFieldType,
+			resetPresetAndRefresh,
+			refresh,
 		};
 
 		async function change(group: Group, event: ChangeEvent<Item>) {
@@ -306,6 +312,17 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 			return url;
 		}
 
+		async function resetPresetAndRefresh() {
+			await props?.resetPreset?.();
+			refresh();
+		}
+
+		function refresh() {
+			getItems();
+			// potentially reload the related group items, if the group field is relational
+			if (isRelational.value) getGroups();
+		}
+
 		function useLayoutOptions() {
 			const groupField = createViewOption<string | null>('groupField', fieldGroups.value.group[0]?.field ?? null);
 			const groupTitle = createViewOption<string | null>('groupTitle', null);
@@ -450,6 +467,7 @@ export default defineLayout<LayoutOptions, LayoutQuery>({
 				groupsPrimaryKeyField,
 				groupsSortField,
 				groupsCollection,
+				getGroups,
 				addGroup,
 				editGroup,
 				deleteGroup,

app/src/layouts/kanban/kanban.vue

@@ -32,6 +32,8 @@ const props = withDefaults(
 		userField?: string | null;
 		groupsSortField?: string | null;
 		layoutOptions: LayoutOptions;
+		resetPresetAndRefresh: () => Promise<void>;
+		error?: any;
 	}>(),
 	{
 		collection: null,
@@ -90,7 +92,7 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 </script>
 
 <template>
-	<div class="kanban">
+	<div v-if="!error" class="kanban">
 		<draggable
 			:model-value="groupedItems"
 			group="groups"
@@ -180,9 +182,6 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 				</div>
 			</template>
 		</draggable>
-		<!-- <div v-if="isRelational" class="add-group" @click="editDialogOpen = '+'">
-			<v-icon name="add_box" />
-		</div> -->
 
 		<v-dialog :model-value="editDialogOpen !== null" @esc="cancelChanges()">
 			<v-card>
@@ -199,13 +198,14 @@ const textFieldConfiguration = computed<Field | undefined>(() => {
 			</v-card>
 		</v-dialog>
 	</div>
+	<slot v-else name="error" :error="error" :reset="resetPresetAndRefresh" />
 </template>
 
 <style lang="scss" scoped>
 .kanban {
 	display: flex;
 	height: calc(100% - 65px - 2 * 24px);
-	padding: 0px 32px 24px 32px;
+	padding: 0 32px 24px 32px;
 	overflow-x: auto;
 	overflow-y: hidden;
 	--user-spacing: 16px;

app/src/layouts/map/map.vue

@@ -92,15 +92,7 @@ limitWritable.value = selectedSize;
 		</transition>
 
 		<transition name="fade">
-			<v-info v-if="error" type="danger" :title="t('unexpected_error')" icon="error" center>
-				{{ t('unexpected_error_copy') }}
-				<template #append>
-					<v-error :error="error" />
-					<v-button small class="reset-preset" @click="resetPresetAndRefresh">
-						{{ t('reset_page_preferences') }}
-					</v-button>
-				</template>
-			</v-info>
+			<slot v-if="error" name="error" :error="error" :reset="resetPresetAndRefresh" />
 			<v-info
 				v-else-if="geojsonError"
 				type="warning"
@@ -217,10 +209,6 @@ limitWritable.value = selectedSize;
 	--v-progress-circular-color: var(--theme--primary);
 }
 
-.reset-preset {
-	margin-top: 24px;
-}
-
 .footer {
 	position: absolute;
 	right: 0;

app/src/layouts/tabular/tabular.vue

@@ -266,18 +266,7 @@ function removeField(fieldKey: string) {
 			</template>
 		</v-table>
 
-		<v-info v-else-if="error" type="danger" :title="t('unexpected_error')" icon="error" center>
-			{{ t('unexpected_error_copy') }}
-
-			<template #append>
-				<v-error :error="error" />
-
-				<v-button small class="reset-preset" @click="resetPresetAndRefresh">
-					{{ t('reset_page_preferences') }}
-				</v-button>
-			</template>
-		</v-info>
-
+		<slot v-else-if="error" name="error" :error="error" :reset="resetPresetAndRefresh" />
 		<slot v-else-if="itemCount === 0 && (filterUser || search)" name="no-results" />
 		<slot v-else-if="itemCount === 0" name="no-items" />
 	</div>
@@ -336,10 +325,6 @@ function removeField(fieldKey: string) {
 	}
 }
 
-.reset-preset {
-	margin-top: 24px;
-}
-
 .add-field {
 	--v-icon-color-hover: var(--theme--foreground);
 

app/src/modules/content/routes/collection.vue

@@ -500,6 +500,20 @@ function clearFilters() {
 						</template>
 					</v-info>
 				</template>
+
+				<template #error="{ error, reset }">
+					<v-info type="danger" :title="t('unexpected_error')" icon="error" center>
+						{{ t('unexpected_error_copy') }}
+
+						<template #append>
+							<v-error :error="error" />
+
+							<v-button small class="reset-preset" @click="reset">
+								{{ t('reset_page_preferences') }}
+							</v-button>
+						</template>
+					</v-info>
+				</template>
 			</component>
 
 			<drawer-batch
@@ -563,6 +577,10 @@ function clearFilters() {
 	--v-button-color-disabled: var(--theme--foreground);
 }
 
+.reset-preset {
+	margin-top: 24px;
+}
+
 .bookmark-controls {
 	.add,
 	.save,