From 608255d151bffce97c3773bfdae8d2e2102aa997 Mon Sep 17 00:00:00 2001
From: Nicola Krumschmidt <nicola.krumschmidt@freenet.de>
Date: Fri, 5 May 2023 15:13:09 +0200
Subject: [PATCH] Convert flows store to setup function (#18504)

---
 app/src/stores/flows.ts | 73 ++++++++++++++++++++++-------------------
 1 file changed, 39 insertions(+), 34 deletions(-)

diff --git a/app/src/stores/flows.ts b/app/src/stores/flows.ts
index a904f182fd..5ff880321c 100644
--- a/app/src/stores/flows.ts
+++ b/app/src/stores/flows.ts
@@ -1,41 +1,46 @@
-import { FlowRaw } from '@directus/types';
 import api from '@/api';
-import { defineStore } from 'pinia';
-import { useUserStore } from '@/stores/user';
 import { usePermissionsStore } from '@/stores/permissions';
+import { useUserStore } from '@/stores/user';
+import { FlowRaw } from '@directus/types';
+import { defineStore } from 'pinia';
+import { ref } from 'vue';
 
-export const useFlowsStore = defineStore({
-	id: 'flowsStore',
-	state: () => ({
-		flows: [] as FlowRaw[],
-	}),
-	actions: {
-		async hydrate() {
-			const { isAdmin } = useUserStore();
-			const { hasPermission } = usePermissionsStore();
+export const useFlowsStore = defineStore('flowsStore', () => {
+	const flows = ref<FlowRaw[]>([]);
 
-			if (isAdmin !== true && !hasPermission('directus_flows', 'read')) {
-				this.flows = [];
-			} else {
-				try {
-					const response = await api.get<any>('/flows', {
-						params: { limit: -1, fields: ['*', 'operations.*'] },
-					});
+	return {
+		flows,
+		hydrate,
+		dehydrate,
+		getManualFlowsForCollection,
+	};
 
-					this.flows = response.data.data;
-				} catch {
-					this.flows = [];
-				}
+	async function hydrate() {
+		const { isAdmin } = useUserStore();
+		const { hasPermission } = usePermissionsStore();
+
+		if (isAdmin !== true && !hasPermission('directus_flows', 'read')) {
+			flows.value = [];
+		} else {
+			try {
+				const response = await api.get<any>('/flows', {
+					params: { limit: -1, fields: ['*', 'operations.*'] },
+				});
+
+				flows.value = response.data.data;
+			} catch {
+				flows.value = [];
 			}
-		},
-		async dehydrate() {
-			this.$reset();
-		},
-		getManualFlowsForCollection(collection: string): FlowRaw[] {
-			return this.flows.filter(
-				(flow) =>
-					flow.trigger === 'manual' && flow.status === 'active' && flow.options?.collections?.includes(collection)
-			);
-		},
-	},
+		}
+	}
+
+	async function dehydrate() {
+		flows.value = [];
+	}
+
+	function getManualFlowsForCollection(collection: string): FlowRaw[] {
+		return flows.value.filter(
+			(flow) => flow.trigger === 'manual' && flow.status === 'active' && flow.options?.collections?.includes(collection)
+		);
+	}
 });