From 8ba9f753198fb9601fd33c7d11ea3c568e6c66bb Mon Sep 17 00:00:00 2001
From: kamil-malinski <68733431+kamil-malinski@users.noreply.github.com>
Date: Wed, 9 Nov 2022 16:53:40 +0100
Subject: [PATCH 1/5] improves interface and response-handling

---
 src/index.ts      | 320 +++++++++++++++++++++++-----------------------
 src/interface.vue | 267 ++++++++++++++++++++------------------
 2 files changed, 304 insertions(+), 283 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index b5047cb..899f2db 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,161 +1,165 @@
-import { defineInterface } from '@directus/extensions-sdk';
-import InterfaceComponent from './interface.vue';
+import { defineInterface } from "@directus/extensions-sdk";
+import InterfaceComponent from "./interface.vue";
 
 export default defineInterface({
-	id: 'api-trigger',
-	name: 'API Trigger',
-	icon: 'sync',
-	description: 'Display a button to trigger custom APIs',
-	component: InterfaceComponent,
-	hideLabel: true,
-	hideLoader: true,
-	types: ['alias'],
-	localTypes: ['presentation'],
-	group: 'presentation',
-	options: ({ collection }) => [
-		{
-			field: 'layout',
-			name: 'Layout',
-			type: 'string',
-			schema: {
-				default_value: 'vertical',
-			},
-			meta: {
-				interface: 'select-dropdown',
-				options: {
-					choices: [
-						{ text: 'Horizontal', value: 'horizontal' },
-						{ text: 'Vertical', value: 'vertical' },
-					],
-				},
-			},
-		},
-		{
-			field: 'triggers',
-			name: 'Triggers',
-			type: 'json',
-			meta: {
-				interface: 'list',
-				options: {
-					fields: [
-						{
-							field: 'label',
-							name: 'Label',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'input',
-							},
-						},
-						{
-							field: 'size',
-							name: 'Size',
-							type: 'string',
-							schema: {
-								default_value: '',
-							},
-							meta: {
-								width: 'half',
-								interface: 'select-dropdown',
-								options: {
-									choices: [
-										{ text: 'x-small', value: 'x-small' },
-										{ text: 'small', value: 'small' },
-										{ text: 'default', value: '' },
-										{ text: 'large', value: 'large' },
-										{ text: 'x-large', value: 'x-large' },
-									],
-								},
-							},
-						},
-						{
-							field: 'type',
-							name: 'Type',
-							type: 'string',
-							schema: {
-								default_value: 'normal',
-							},
-							meta: {
-								width: 'half',
-								interface: 'select-dropdown',
-								default_value: 'normal',
-								options: {
-									choices: [
-										{ text: 'Primary', value: 'primary' },
-										{ text: 'Normal', value: 'normal' },
-										{ text: 'Info', value: 'info' },
-										{ text: 'Success', value: 'success' },
-										{ text: 'Warning', value: 'warning' },
-										{ text: 'Danger', value: 'danger' },
-									],
-								},
-							},
-						},
-						{
-							field: 'icon',
-							name: 'Icon',
-							type: 'string',
-							meta: {
-								width: 'half',
-								interface: 'select-icon',
-							},
-						},
-						{
-							field: 'url',
-							name: 'URL',
-							type: 'string',
-							meta: {
-								width: 'full',
-								interface: 'input',
-							},
-						},
-						{
-							field: 'method',
-							name: 'Method',
-							type: 'string',
-							schema: {
-								default_value: 'GET',
-							},
-							meta: {
-								interface: 'select-dropdown',
-								width: 'half',
-								options: {
-									choices: [
-										{ text: 'GET', value: 'GET' },
-										{ text: 'POST', value: 'POST' },
-										{ text: 'PUT', value: 'PUT' },
-										{ text: 'PATCH', value: 'PATCH' },
-										{ text: 'DELETE', value: 'DELETE' },
-									],
-								},
-							},
-						},
-						{
-							field: 'reload',
-							name: 'Reload',
-							type: 'boolean',
-							schema: {
-								default_value: false,
-							},
-							meta: {
-								interface: 'boolean',
-								width: 'half',
-							},
-						},
-						{
-							field: 'disabledConditions',
-							name: 'Disabled Conditions',
-							type: 'json',
-							meta: {
-								interface: 'system-filter',
-								options: {
-									collectionName: collection,
-								},
-							},
-						},
-					],
-				},
-			},
-		},
-	],
+    id: "api-trigger",
+    name: "API Trigger",
+    icon: "sync",
+    description: "Display a button to trigger custom APIs",
+    component: InterfaceComponent,
+    hideLabel: true,
+    hideLoader: true,
+    types: ["alias"],
+    localTypes: ["presentation"],
+    group: "presentation",
+    options: ({ collection }) => [
+        {
+            field: "layout",
+            name: "Layout",
+            type: "string",
+            schema: {
+                default_value: "vertical",
+            },
+            meta: {
+                interface: "select-dropdown",
+                options: {
+                    choices: [
+                        { text: "Horizontal", value: "horizontal" },
+                        { text: "Vertical", value: "vertical" },
+                    ],
+                },
+            },
+        },
+        {
+            field: "triggers",
+            name: "Triggers",
+            type: "json",
+            meta: {
+                interface: "list",
+                options: {
+                    fields: [
+                        {
+                            field: "label",
+                            name: "Label",
+                            type: "string",
+                            meta: {
+                                width: "half",
+                                interface: "input",
+                            },
+                        },
+                        {
+                            field: "size",
+                            name: "Size",
+                            type: "string",
+                            schema: {
+                                default_value: "",
+                            },
+                            meta: {
+                                width: "half",
+                                interface: "select-dropdown",
+                                options: {
+                                    choices: [
+                                        { text: "x-small", value: "x-small" },
+                                        { text: "small", value: "small" },
+                                        { text: "default", value: "" },
+                                        { text: "large", value: "large" },
+                                        { text: "x-large", value: "x-large" },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            field: "type",
+                            name: "Type",
+                            type: "string",
+                            schema: {
+                                default_value: "normal",
+                            },
+                            meta: {
+                                width: "half",
+                                interface: "select-dropdown",
+                                default_value: "normal",
+                                options: {
+                                    choices: [
+                                        { text: "Primary", value: "primary" },
+                                        { text: "Normal", value: "normal" },
+                                        { text: "Info", value: "info" },
+                                        { text: "Success", value: "success" },
+                                        { text: "Warning", value: "warning" },
+                                        { text: "Danger", value: "danger" },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            field: "icon",
+                            name: "Icon",
+                            type: "string",
+                            meta: {
+                                width: "half",
+                                interface: "select-icon",
+                            },
+                        },
+                        {
+                            field: "url",
+                            name: "URL",
+                            type: "string",
+                            meta: {
+                                width: "full",
+                                options: {
+                                    collectionName: collection,
+                                    font: "monospace",
+                                    placeholder: "/items/collection/{{ id }}",
+                                },
+                            },
+                        },
+                        {
+                            field: "method",
+                            name: "Method",
+                            type: "string",
+                            schema: {
+                                default_value: "GET",
+                            },
+                            meta: {
+                                interface: "select-dropdown",
+                                width: "half",
+                                options: {
+                                    choices: [
+                                        { text: "GET", value: "GET" },
+                                        { text: "POST", value: "POST" },
+                                        { text: "PUT", value: "PUT" },
+                                        { text: "PATCH", value: "PATCH" },
+                                        { text: "DELETE", value: "DELETE" },
+                                    ],
+                                },
+                            },
+                        },
+                        {
+                            field: "reload",
+                            name: "Reload",
+                            type: "boolean",
+                            schema: {
+                                default_value: false,
+                            },
+                            meta: {
+                                interface: "boolean",
+                                width: "half",
+                            },
+                        },
+                        {
+                            field: "disabledConditions",
+                            name: "Disabled Conditions",
+                            type: "json",
+                            meta: {
+                                interface: "system-filter",
+                                options: {
+                                    collectionName: collection,
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    ],
 });
diff --git a/src/interface.vue b/src/interface.vue
index 4b96181..9af3390 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -1,145 +1,162 @@
 <template>
-	<div class="trigger-list" :class="[layout]">
-		<v-button
-			v-for="(trigger, index) in triggers"
-			:key="index"
-			class="action"
-			:class="[trigger.type]"
-			:loading="loadings[index].value"
-			:disabled="disableds[index]"
-			:secondary="trigger.type !== 'primary'"
-			v-bind="{ [trigger.size]: true }"
-			@click="onClick(trigger.method, parsedUrls[index], index)"
-		>
-			<v-icon v-if="trigger.icon" left :name="trigger.icon" />
-			<span v-if="trigger.label">{{ trigger.label }}</span>
-		</v-button>
-	</div>
+    <div class="trigger-list" :class="[layout]">
+        <v-button
+            v-for="(trigger, index) in triggers"
+            :key="index"
+            class="action"
+            :class="[trigger.type]"
+            :loading="loadings[index].value"
+            :disabled="disableds[index]"
+            :secondary="trigger.type !== 'primary'"
+            v-bind="{ [trigger.size]: true }"
+            @click="onClick(trigger.method, parsedUrls[index], index)"
+        >
+            <v-icon v-if="trigger.icon" left :name="trigger.icon" />
+            <span v-if="trigger.label">{{ trigger.label }}</span>
+        </v-button>
+    </div>
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, inject, PropType, ref } from 'vue';
-import { useRouter } from 'vue-router';
-import { useApi, useStores } from '@directus/extensions-sdk';
-import { Filter } from '@directus/shared/types';
-import { render } from 'micromustache';
-import { checkConditions } from './check-conditions';
+import { computed, defineComponent, inject, PropType, ref } from "vue";
+import { useRouter } from "vue-router";
+import { useApi, useStores } from "@directus/extensions-sdk";
+import { Filter } from "@directus/shared/types";
+import { render } from "micromustache";
+import { checkConditions } from "./check-conditions";
 
 type Trigger = {
-	label: string;
-	size: string;
-	type: string;
-	icon: string;
-	url: string;
-	method: string;
-	disabledConditions: Filter;
-	reload: boolean;
+    label: string;
+    size: string;
+    type: string;
+    icon: string;
+    url: string;
+    method: string;
+    disabledConditions: Filter;
+    reload: boolean;
 };
 
 export default defineComponent({
-	props: {
-		triggers: {
-			type: Array as PropType<Trigger[]>,
-			default: null,
-		},
-		layout: {
-			type: String,
-			default: 'vertical',
-		},
-	},
-	setup(props) {
-		const api = useApi();
-		const { useNotificationsStore } = useStores();
-		const store = useNotificationsStore();
-		const router = useRouter();
-
-		const values = inject('values', ref<Record<string, any>>({}));
-		const parsedUrls = computed(() => props.triggers.map((trigger) => render(trigger.url ?? '', values.value)));
-		const disableds = computed(() => props.triggers.map((trigger) => (
-			trigger.disabledConditions && checkConditions(values.value, trigger.disabledConditions)),
-		));
-
-		const loadings = props.triggers.map(() => ref(false));
-
-		return { loadings, parsedUrls, disableds, onClick };
-
-		async function onClick(method: string, url: string, index: number) {
-			const loading = loadings[index];
-			if (!loading) return;
-			loading.value = true;
-
-			try {
-				await api.request({
-					method,
-					url,
-				});
-				if (props.triggers[index]?.reload) {
-					router.go(0);
-				} else {
-					store.add({
-						title: 'Success',
-						type: 'success',
-					});
-				}
-			} catch (error: any) {
-				const message = error.response?.data?.errors?.[0]?.message || error.message || undefined;
-				store.add({
-					title: 'Error',
-					text: message,
-					type: 'error',
-					dialog: true,
-					error,
-				});
-			} finally {
-				loading.value = false;
-			}
-		}
-	},
+    props: {
+        triggers: {
+            type: Array as PropType<Trigger[]>,
+            default: null,
+        },
+        layout: {
+            type: String,
+            default: "vertical",
+        },
+    },
+    setup(props) {
+        const api = useApi();
+        const { useNotificationsStore } = useStores();
+        const store = useNotificationsStore();
+        const router = useRouter();
+
+        const values = inject("values", ref<Record<string, any>>({}));
+        const parsedUrls = computed(() =>
+            props.triggers.map((trigger) =>
+                render(trigger.url ?? "", values.value)
+            )
+        );
+        const disableds = computed(() =>
+            props.triggers.map(
+                (trigger) =>
+                    trigger.disabledConditions &&
+                    checkConditions(values.value, trigger.disabledConditions)
+            )
+        );
+
+        const loadings = props.triggers.map(() => ref(false));
+
+        return { loadings, parsedUrls, disableds, onClick };
+
+        async function onClick(method: string, url: string, index: number) {
+            const loading = loadings[index];
+            if (!loading) return;
+            loading.value = true;
+
+            try {
+                const result = await api.request({
+                    method,
+                    url,
+                });
+                if (props.triggers[index]?.reload) {
+                    router.go(0);
+                } else {
+                    store.add({
+                        title: result.data?.title || "Success",
+                        text:
+                            result.data?.text ||
+                            "Action was completed successfully",
+                        type: "success",
+                        dialog: true,
+                    });
+
+                    if (result.data?.goto) router.push(result.data.goto);
+                }
+            } catch (error: any) {
+                const message =
+                    error.response?.data?.errors?.[0]?.message ||
+                    error.message ||
+                    undefined;
+                store.add({
+                    title: "Error",
+                    text: message,
+                    type: "error",
+                    dialog: true,
+                    error,
+                });
+            } finally {
+                loading.value = false;
+            }
+        }
+    },
 });
 </script>
 
 <style lang="scss" scoped>
 .trigger-list {
-	display: flex;
-	gap: 8px;
+    display: flex;
+    gap: 8px;
 
-	&.vertical {
-		flex-direction: column;
-	}
+    &.vertical {
+        flex-direction: column;
+    }
 
-	&.horizontal {
-		flex-wrap: wrap;
-	}
+    &.horizontal {
+        flex-wrap: wrap;
+    }
 }
 
 .action {
-	&.info {
-		--v-button-background-color: var(--blue);
-		--v-button-background-color-hover: var(--blue-125);
-		--v-button-color: var(--blue-alt);
-		--v-button-color-hover: var(--blue-alt);
-	}
-
-	&.success {
-		--v-button-background-color: var(--success);
-		--v-button-background-color-hover: var(--success-125);
-		--v-button-color: var(--success-alt);
-		--v-button-color-hover: var(--success-alt);
-	}
-
-	&.warning {
-		--v-button-background-color: var(--warning);
-		--v-button-background-color-hover: var(--warning-125);
-		--v-button-color: var(--warning-alt);
-		--v-button-color-hover: var(--warning-alt);
-	}
-
-	&.danger {
-		--v-button-icon-color: var(--white);
-		--v-button-background-color: var(--danger);
-		--v-button-background-color-hover: var(--danger-125);
-		--v-button-color: var(--danger-alt);
-		--v-button-color-hover: var(--danger-alt);
-	}
+    &.info {
+        --v-button-background-color: var(--blue);
+        --v-button-background-color-hover: var(--blue-125);
+        --v-button-color: var(--blue-alt);
+        --v-button-color-hover: var(--blue-alt);
+    }
+
+    &.success {
+        --v-button-background-color: var(--success);
+        --v-button-background-color-hover: var(--success-125);
+        --v-button-color: var(--success-alt);
+        --v-button-color-hover: var(--success-alt);
+    }
+
+    &.warning {
+        --v-button-background-color: var(--warning);
+        --v-button-background-color-hover: var(--warning-125);
+        --v-button-color: var(--warning-alt);
+        --v-button-color-hover: var(--warning-alt);
+    }
+
+    &.danger {
+        --v-button-icon-color: var(--white);
+        --v-button-background-color: var(--danger);
+        --v-button-background-color-hover: var(--danger-125);
+        --v-button-color: var(--danger-alt);
+        --v-button-color-hover: var(--danger-alt);
+    }
 }
-</style>
\ No newline at end of file
+</style>

From b2c4cb5b394673e0837937f92326774cfce94a84 Mon Sep 17 00:00:00 2001
From: kamil-malinski <68733431+kamil-malinski@users.noreply.github.com>
Date: Thu, 10 Nov 2022 13:08:02 +0100
Subject: [PATCH 2/5] adds system-display-template interface to url

---
 src/index.ts      | 1 +
 src/interface.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/index.ts b/src/index.ts
index 899f2db..b636725 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -106,6 +106,7 @@ export default defineInterface({
                             type: "string",
                             meta: {
                                 width: "full",
+                                interface: "system-display-template",
                                 options: {
                                     collectionName: collection,
                                     font: "monospace",
diff --git a/src/interface.vue b/src/interface.vue
index 9af3390..35f9c06 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -90,7 +90,7 @@ export default defineComponent({
                             result.data?.text ||
                             "Action was completed successfully",
                         type: "success",
-                        dialog: true,
+                        dialog: result.data?.dialog || false,
                     });
 
                     if (result.data?.goto) router.push(result.data.goto);

From 7964c0f206755d92361ab2f2622043a90604eb8a Mon Sep 17 00:00:00 2001
From: kamil-malinski <68733431+kamil-malinski@users.noreply.github.com>
Date: Thu, 10 Nov 2022 13:10:17 +0100
Subject: [PATCH 3/5] adapts intendation

---
 src/index.ts      | 366 +++++++++++++++++++++++++++-------------------
 src/interface.vue | 285 +++++++++++++++++++-----------------
 2 files changed, 366 insertions(+), 285 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index b636725..701a4b1 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,165 +2,227 @@ import { defineInterface } from "@directus/extensions-sdk";
 import InterfaceComponent from "./interface.vue";
 
 export default defineInterface({
-    id: "api-trigger",
-    name: "API Trigger",
-    icon: "sync",
-    description: "Display a button to trigger custom APIs",
-    component: InterfaceComponent,
-    hideLabel: true,
-    hideLoader: true,
-    types: ["alias"],
-    localTypes: ["presentation"],
-    group: "presentation",
-    options: ({ collection }) => [
-        {
-            field: "layout",
-            name: "Layout",
-            type: "string",
-            schema: {
-                default_value: "vertical",
-            },
-            meta: {
-                interface: "select-dropdown",
-                options: {
-                    choices: [
-                        { text: "Horizontal", value: "horizontal" },
-                        { text: "Vertical", value: "vertical" },
-                    ],
-                },
-            },
-        },
-        {
-            field: "triggers",
-            name: "Triggers",
-            type: "json",
-            meta: {
-                interface: "list",
-                options: {
-                    fields: [
-                        {
-                            field: "label",
-                            name: "Label",
-                            type: "string",
-                            meta: {
-                                width: "half",
-                                interface: "input",
-                            },
-                        },
-                        {
-                            field: "size",
-                            name: "Size",
-                            type: "string",
-                            schema: {
-                                default_value: "",
-                            },
-                            meta: {
-                                width: "half",
-                                interface: "select-dropdown",
-                                options: {
-                                    choices: [
-                                        { text: "x-small", value: "x-small" },
-                                        { text: "small", value: "small" },
-                                        { text: "default", value: "" },
-                                        { text: "large", value: "large" },
-                                        { text: "x-large", value: "x-large" },
-                                    ],
-                                },
-                            },
+        id: "api-trigger",
+        name: "API Trigger",
+        icon: "sync",
+        description: "Display a button to trigger custom APIs",
+        component: InterfaceComponent,
+        hideLabel: true,
+        hideLoader: true,
+        types: ["alias"],
+        localTypes: ["presentation"],
+        group: "presentation",
+        options: ({ collection }) => [
+                {
+                        field: "layout",
+                        name: "Layout",
+                        type: "string",
+                        schema: {
+                                default_value: "vertical",
                         },
-                        {
-                            field: "type",
-                            name: "Type",
-                            type: "string",
-                            schema: {
-                                default_value: "normal",
-                            },
-                            meta: {
-                                width: "half",
+                        meta: {
                                 interface: "select-dropdown",
-                                default_value: "normal",
                                 options: {
-                                    choices: [
-                                        { text: "Primary", value: "primary" },
-                                        { text: "Normal", value: "normal" },
-                                        { text: "Info", value: "info" },
-                                        { text: "Success", value: "success" },
-                                        { text: "Warning", value: "warning" },
-                                        { text: "Danger", value: "danger" },
-                                    ],
+                                        choices: [
+                                                {
+                                                        text: "Horizontal",
+                                                        value: "horizontal",
+                                                },
+                                                {
+                                                        text: "Vertical",
+                                                        value: "vertical",
+                                                },
+                                        ],
                                 },
-                            },
-                        },
-                        {
-                            field: "icon",
-                            name: "Icon",
-                            type: "string",
-                            meta: {
-                                width: "half",
-                                interface: "select-icon",
-                            },
                         },
-                        {
-                            field: "url",
-                            name: "URL",
-                            type: "string",
-                            meta: {
-                                width: "full",
-                                interface: "system-display-template",
-                                options: {
-                                    collectionName: collection,
-                                    font: "monospace",
-                                    placeholder: "/items/collection/{{ id }}",
-                                },
-                            },
-                        },
-                        {
-                            field: "method",
-                            name: "Method",
-                            type: "string",
-                            schema: {
-                                default_value: "GET",
-                            },
-                            meta: {
-                                interface: "select-dropdown",
-                                width: "half",
-                                options: {
-                                    choices: [
-                                        { text: "GET", value: "GET" },
-                                        { text: "POST", value: "POST" },
-                                        { text: "PUT", value: "PUT" },
-                                        { text: "PATCH", value: "PATCH" },
-                                        { text: "DELETE", value: "DELETE" },
-                                    ],
-                                },
-                            },
-                        },
-                        {
-                            field: "reload",
-                            name: "Reload",
-                            type: "boolean",
-                            schema: {
-                                default_value: false,
-                            },
-                            meta: {
-                                interface: "boolean",
-                                width: "half",
-                            },
-                        },
-                        {
-                            field: "disabledConditions",
-                            name: "Disabled Conditions",
-                            type: "json",
-                            meta: {
-                                interface: "system-filter",
+                },
+                {
+                        field: "triggers",
+                        name: "Triggers",
+                        type: "json",
+                        meta: {
+                                interface: "list",
                                 options: {
-                                    collectionName: collection,
+                                        fields: [
+                                                {
+                                                        field: "label",
+                                                        name: "Label",
+                                                        type: "string",
+                                                        meta: {
+                                                                width: "half",
+                                                                interface: "input",
+                                                        },
+                                                },
+                                                {
+                                                        field: "size",
+                                                        name: "Size",
+                                                        type: "string",
+                                                        schema: {
+                                                                default_value:
+                                                                        "",
+                                                        },
+                                                        meta: {
+                                                                width: "half",
+                                                                interface: "select-dropdown",
+                                                                options: {
+                                                                        choices: [
+                                                                                {
+                                                                                        text: "x-small",
+                                                                                        value: "x-small",
+                                                                                },
+                                                                                {
+                                                                                        text: "small",
+                                                                                        value: "small",
+                                                                                },
+                                                                                {
+                                                                                        text: "default",
+                                                                                        value: "",
+                                                                                },
+                                                                                {
+                                                                                        text: "large",
+                                                                                        value: "large",
+                                                                                },
+                                                                                {
+                                                                                        text: "x-large",
+                                                                                        value: "x-large",
+                                                                                },
+                                                                        ],
+                                                                },
+                                                        },
+                                                },
+                                                {
+                                                        field: "type",
+                                                        name: "Type",
+                                                        type: "string",
+                                                        schema: {
+                                                                default_value:
+                                                                        "normal",
+                                                        },
+                                                        meta: {
+                                                                width: "half",
+                                                                interface: "select-dropdown",
+                                                                default_value:
+                                                                        "normal",
+                                                                options: {
+                                                                        choices: [
+                                                                                {
+                                                                                        text: "Primary",
+                                                                                        value: "primary",
+                                                                                },
+                                                                                {
+                                                                                        text: "Normal",
+                                                                                        value: "normal",
+                                                                                },
+                                                                                {
+                                                                                        text: "Info",
+                                                                                        value: "info",
+                                                                                },
+                                                                                {
+                                                                                        text: "Success",
+                                                                                        value: "success",
+                                                                                },
+                                                                                {
+                                                                                        text: "Warning",
+                                                                                        value: "warning",
+                                                                                },
+                                                                                {
+                                                                                        text: "Danger",
+                                                                                        value: "danger",
+                                                                                },
+                                                                        ],
+                                                                },
+                                                        },
+                                                },
+                                                {
+                                                        field: "icon",
+                                                        name: "Icon",
+                                                        type: "string",
+                                                        meta: {
+                                                                width: "half",
+                                                                interface: "select-icon",
+                                                        },
+                                                },
+                                                {
+                                                        field: "url",
+                                                        name: "URL",
+                                                        type: "string",
+                                                        meta: {
+                                                                width: "full",
+                                                                interface: "system-display-template",
+                                                                options: {
+                                                                        collectionName:
+                                                                                collection,
+                                                                        font: "monospace",
+                                                                        placeholder:
+                                                                                "/items/collection/{{ id }}",
+                                                                },
+                                                        },
+                                                },
+                                                {
+                                                        field: "method",
+                                                        name: "Method",
+                                                        type: "string",
+                                                        schema: {
+                                                                default_value:
+                                                                        "GET",
+                                                        },
+                                                        meta: {
+                                                                interface: "select-dropdown",
+                                                                width: "half",
+                                                                options: {
+                                                                        choices: [
+                                                                                {
+                                                                                        text: "GET",
+                                                                                        value: "GET",
+                                                                                },
+                                                                                {
+                                                                                        text: "POST",
+                                                                                        value: "POST",
+                                                                                },
+                                                                                {
+                                                                                        text: "PUT",
+                                                                                        value: "PUT",
+                                                                                },
+                                                                                {
+                                                                                        text: "PATCH",
+                                                                                        value: "PATCH",
+                                                                                },
+                                                                                {
+                                                                                        text: "DELETE",
+                                                                                        value: "DELETE",
+                                                                                },
+                                                                        ],
+                                                                },
+                                                        },
+                                                },
+                                                {
+                                                        field: "reload",
+                                                        name: "Reload",
+                                                        type: "boolean",
+                                                        schema: {
+                                                                default_value:
+                                                                        false,
+                                                        },
+                                                        meta: {
+                                                                interface: "boolean",
+                                                                width: "half",
+                                                        },
+                                                },
+                                                {
+                                                        field: "disabledConditions",
+                                                        name: "Disabled Conditions",
+                                                        type: "json",
+                                                        meta: {
+                                                                interface: "system-filter",
+                                                                options: {
+                                                                        collectionName:
+                                                                                collection,
+                                                                },
+                                                        },
+                                                },
+                                        ],
                                 },
-                            },
                         },
-                    ],
                 },
-            },
-        },
-    ],
+        ],
 });
diff --git a/src/interface.vue b/src/interface.vue
index 35f9c06..94fdc14 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -1,20 +1,26 @@
 <template>
-    <div class="trigger-list" :class="[layout]">
-        <v-button
-            v-for="(trigger, index) in triggers"
-            :key="index"
-            class="action"
-            :class="[trigger.type]"
-            :loading="loadings[index].value"
-            :disabled="disableds[index]"
-            :secondary="trigger.type !== 'primary'"
-            v-bind="{ [trigger.size]: true }"
-            @click="onClick(trigger.method, parsedUrls[index], index)"
-        >
-            <v-icon v-if="trigger.icon" left :name="trigger.icon" />
-            <span v-if="trigger.label">{{ trigger.label }}</span>
-        </v-button>
-    </div>
+        <div class="trigger-list" :class="[layout]">
+                <v-button
+                        v-for="(trigger, index) in triggers"
+                        :key="index"
+                        class="action"
+                        :class="[trigger.type]"
+                        :loading="loadings[index].value"
+                        :disabled="disableds[index]"
+                        :secondary="trigger.type !== 'primary'"
+                        v-bind="{ [trigger.size]: true }"
+                        @click="
+                                onClick(
+                                        trigger.method,
+                                        parsedUrls[index],
+                                        index
+                                )
+                        "
+                >
+                        <v-icon v-if="trigger.icon" left :name="trigger.icon" />
+                        <span v-if="trigger.label">{{ trigger.label }}</span>
+                </v-button>
+        </div>
 </template>
 
 <script lang="ts">
@@ -26,137 +32,150 @@ import { render } from "micromustache";
 import { checkConditions } from "./check-conditions";
 
 type Trigger = {
-    label: string;
-    size: string;
-    type: string;
-    icon: string;
-    url: string;
-    method: string;
-    disabledConditions: Filter;
-    reload: boolean;
+        label: string;
+        size: string;
+        type: string;
+        icon: string;
+        url: string;
+        method: string;
+        disabledConditions: Filter;
+        reload: boolean;
 };
 
 export default defineComponent({
-    props: {
-        triggers: {
-            type: Array as PropType<Trigger[]>,
-            default: null,
+        props: {
+                triggers: {
+                        type: Array as PropType<Trigger[]>,
+                        default: null,
+                },
+                layout: {
+                        type: String,
+                        default: "vertical",
+                },
         },
-        layout: {
-            type: String,
-            default: "vertical",
-        },
-    },
-    setup(props) {
-        const api = useApi();
-        const { useNotificationsStore } = useStores();
-        const store = useNotificationsStore();
-        const router = useRouter();
-
-        const values = inject("values", ref<Record<string, any>>({}));
-        const parsedUrls = computed(() =>
-            props.triggers.map((trigger) =>
-                render(trigger.url ?? "", values.value)
-            )
-        );
-        const disableds = computed(() =>
-            props.triggers.map(
-                (trigger) =>
-                    trigger.disabledConditions &&
-                    checkConditions(values.value, trigger.disabledConditions)
-            )
-        );
-
-        const loadings = props.triggers.map(() => ref(false));
-
-        return { loadings, parsedUrls, disableds, onClick };
-
-        async function onClick(method: string, url: string, index: number) {
-            const loading = loadings[index];
-            if (!loading) return;
-            loading.value = true;
-
-            try {
-                const result = await api.request({
-                    method,
-                    url,
-                });
-                if (props.triggers[index]?.reload) {
-                    router.go(0);
-                } else {
-                    store.add({
-                        title: result.data?.title || "Success",
-                        text:
-                            result.data?.text ||
-                            "Action was completed successfully",
-                        type: "success",
-                        dialog: result.data?.dialog || false,
-                    });
-
-                    if (result.data?.goto) router.push(result.data.goto);
+        setup(props) {
+                const api = useApi();
+                const { useNotificationsStore } = useStores();
+                const store = useNotificationsStore();
+                const router = useRouter();
+
+                const values = inject("values", ref<Record<string, any>>({}));
+                const parsedUrls = computed(() =>
+                        props.triggers.map((trigger) =>
+                                render(trigger.url ?? "", values.value)
+                        )
+                );
+                const disableds = computed(() =>
+                        props.triggers.map(
+                                (trigger) =>
+                                        trigger.disabledConditions &&
+                                        checkConditions(
+                                                values.value,
+                                                trigger.disabledConditions
+                                        )
+                        )
+                );
+
+                const loadings = props.triggers.map(() => ref(false));
+
+                return { loadings, parsedUrls, disableds, onClick };
+
+                async function onClick(
+                        method: string,
+                        url: string,
+                        index: number
+                ) {
+                        const loading = loadings[index];
+                        if (!loading) return;
+                        loading.value = true;
+
+                        try {
+                                const result = await api.request({
+                                        method,
+                                        url,
+                                });
+                                if (props.triggers[index]?.reload) {
+                                        router.go(0);
+                                } else {
+                                        store.add({
+                                                title:
+                                                        result.data?.title ||
+                                                        "Success",
+                                                text:
+                                                        result.data?.text ||
+                                                        "Action was completed successfully",
+                                                type: "success",
+                                                dialog:
+                                                        result.data?.dialog ||
+                                                        false,
+                                        });
+
+                                        if (result.data?.goto)
+                                                router.push(result.data.goto);
+                                }
+                        } catch (error: any) {
+                                const message =
+                                        error.response?.data?.errors?.[0]
+                                                ?.message ||
+                                        error.message ||
+                                        undefined;
+                                store.add({
+                                        title: "Error",
+                                        text: message,
+                                        type: "error",
+                                        dialog: true,
+                                        error,
+                                });
+                        } finally {
+                                loading.value = false;
+                        }
                 }
-            } catch (error: any) {
-                const message =
-                    error.response?.data?.errors?.[0]?.message ||
-                    error.message ||
-                    undefined;
-                store.add({
-                    title: "Error",
-                    text: message,
-                    type: "error",
-                    dialog: true,
-                    error,
-                });
-            } finally {
-                loading.value = false;
-            }
-        }
-    },
+        },
 });
 </script>
 
 <style lang="scss" scoped>
 .trigger-list {
-    display: flex;
-    gap: 8px;
+        display: flex;
+        gap: 8px;
 
-    &.vertical {
-        flex-direction: column;
-    }
+        &.vertical {
+                flex-direction: column;
+        }
 
-    &.horizontal {
-        flex-wrap: wrap;
-    }
+        &.horizontal {
+                flex-wrap: wrap;
+        }
 }
 
 .action {
-    &.info {
-        --v-button-background-color: var(--blue);
-        --v-button-background-color-hover: var(--blue-125);
-        --v-button-color: var(--blue-alt);
-        --v-button-color-hover: var(--blue-alt);
-    }
-
-    &.success {
-        --v-button-background-color: var(--success);
-        --v-button-background-color-hover: var(--success-125);
-        --v-button-color: var(--success-alt);
-        --v-button-color-hover: var(--success-alt);
-    }
-
-    &.warning {
-        --v-button-background-color: var(--warning);
-        --v-button-background-color-hover: var(--warning-125);
-        --v-button-color: var(--warning-alt);
-        --v-button-color-hover: var(--warning-alt);
-    }
-
-    &.danger {
-        --v-button-icon-color: var(--white);
-        --v-button-background-color: var(--danger);
-        --v-button-background-color-hover: var(--danger-125);
-        --v-button-color: var(--danger-alt);
-        --v-button-color-hover: var(--danger-alt);
-    }
+        &.info {
+                --v-button-background-color: var(--blue);
+                --v-button-background-color-hover: var(--blue-125);
+                --v-button-color: var(--blue-alt);
+                --v-button-color-hover: var(--blue-alt);
+        }
+
+        &.success {
+                --v-button-background-color: var(--success);
+                --v-button-background-color-hover: var(--success-125);
+                --v-button-color: var(--success-alt);
+                --v-button-color-hover: var(--success-alt);
+        }
+
+        &.warning {
+                --v-button-background-color: var(--warning);
+                --v-button-background-color-hover: var(--warning-125);
+                --v-button-color: var(--warning-alt);
+                --v-button-color-hover: var(--warning-alt);
+        }
+
+        &.danger {
+                --v-button-icon-color: var(--white);
+                --v-button-background-color: var(--danger);
+                --v-button-background-color-hover: var(--danger-125);
+                --v-button-color: var(--danger-alt);
+                --v-button-color-hover: var(--danger-alt);
+        }
 }
 </style>

From 44e4681210092c02057c10a1ffbbe76f2c7c74ff Mon Sep 17 00:00:00 2001
From: kamil-malinski <68733431+kamil-malinski@users.noreply.github.com>
Date: Mon, 23 Jan 2023 14:18:36 +0100
Subject: [PATCH 4/5] styling

---
 src/index.ts      | 434 +++++++++++++++++++++++-----------------------
 src/interface.vue | 285 ++++++++++++++----------------
 2 files changed, 344 insertions(+), 375 deletions(-)

diff --git a/src/index.ts b/src/index.ts
index 701a4b1..741b69d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -2,227 +2,219 @@ import { defineInterface } from "@directus/extensions-sdk";
 import InterfaceComponent from "./interface.vue";
 
 export default defineInterface({
-        id: "api-trigger",
-        name: "API Trigger",
-        icon: "sync",
-        description: "Display a button to trigger custom APIs",
-        component: InterfaceComponent,
-        hideLabel: true,
-        hideLoader: true,
-        types: ["alias"],
-        localTypes: ["presentation"],
-        group: "presentation",
-        options: ({ collection }) => [
-                {
-                        field: "layout",
-                        name: "Layout",
-                        type: "string",
-                        schema: {
-                                default_value: "vertical",
-                        },
-                        meta: {
-                                interface: "select-dropdown",
-                                options: {
-                                        choices: [
-                                                {
-                                                        text: "Horizontal",
-                                                        value: "horizontal",
-                                                },
-                                                {
-                                                        text: "Vertical",
-                                                        value: "vertical",
-                                                },
-                                        ],
-                                },
-                        },
+  id: "api-trigger",
+  name: "API Trigger",
+  icon: "sync",
+  description: "Display a button to trigger custom APIs",
+  component: InterfaceComponent,
+  hideLabel: true,
+  hideLoader: true,
+  types: ["alias"],
+  localTypes: ["presentation"],
+  group: "presentation",
+  options: ({ collection }) => [
+    {
+      field: "layout",
+      name: "Layout",
+      type: "string",
+      schema: {
+        default_value: "vertical",
+      },
+      meta: {
+        interface: "select-dropdown",
+        options: {
+          choices: [
+            {
+              text: "Horizontal",
+              value: "horizontal",
+            },
+            {
+              text: "Vertical",
+              value: "vertical",
+            },
+          ],
+        },
+      },
+    },
+    {
+      field: "triggers",
+      name: "Triggers",
+      type: "json",
+      meta: {
+        interface: "list",
+        options: {
+          fields: [
+            {
+              field: "label",
+              name: "Label",
+              type: "string",
+              meta: {
+                width: "half",
+                interface: "input",
+              },
+            },
+            {
+              field: "size",
+              name: "Size",
+              type: "string",
+              schema: {
+                default_value: "",
+              },
+              meta: {
+                width: "half",
+                interface: "select-dropdown",
+                options: {
+                  choices: [
+                    {
+                      text: "x-small",
+                      value: "x-small",
+                    },
+                    {
+                      text: "small",
+                      value: "small",
+                    },
+                    {
+                      text: "default",
+                      value: "",
+                    },
+                    {
+                      text: "large",
+                      value: "large",
+                    },
+                    {
+                      text: "x-large",
+                      value: "x-large",
+                    },
+                  ],
                 },
-                {
-                        field: "triggers",
-                        name: "Triggers",
-                        type: "json",
-                        meta: {
-                                interface: "list",
-                                options: {
-                                        fields: [
-                                                {
-                                                        field: "label",
-                                                        name: "Label",
-                                                        type: "string",
-                                                        meta: {
-                                                                width: "half",
-                                                                interface: "input",
-                                                        },
-                                                },
-                                                {
-                                                        field: "size",
-                                                        name: "Size",
-                                                        type: "string",
-                                                        schema: {
-                                                                default_value:
-                                                                        "",
-                                                        },
-                                                        meta: {
-                                                                width: "half",
-                                                                interface: "select-dropdown",
-                                                                options: {
-                                                                        choices: [
-                                                                                {
-                                                                                        text: "x-small",
-                                                                                        value: "x-small",
-                                                                                },
-                                                                                {
-                                                                                        text: "small",
-                                                                                        value: "small",
-                                                                                },
-                                                                                {
-                                                                                        text: "default",
-                                                                                        value: "",
-                                                                                },
-                                                                                {
-                                                                                        text: "large",
-                                                                                        value: "large",
-                                                                                },
-                                                                                {
-                                                                                        text: "x-large",
-                                                                                        value: "x-large",
-                                                                                },
-                                                                        ],
-                                                                },
-                                                        },
-                                                },
-                                                {
-                                                        field: "type",
-                                                        name: "Type",
-                                                        type: "string",
-                                                        schema: {
-                                                                default_value:
-                                                                        "normal",
-                                                        },
-                                                        meta: {
-                                                                width: "half",
-                                                                interface: "select-dropdown",
-                                                                default_value:
-                                                                        "normal",
-                                                                options: {
-                                                                        choices: [
-                                                                                {
-                                                                                        text: "Primary",
-                                                                                        value: "primary",
-                                                                                },
-                                                                                {
-                                                                                        text: "Normal",
-                                                                                        value: "normal",
-                                                                                },
-                                                                                {
-                                                                                        text: "Info",
-                                                                                        value: "info",
-                                                                                },
-                                                                                {
-                                                                                        text: "Success",
-                                                                                        value: "success",
-                                                                                },
-                                                                                {
-                                                                                        text: "Warning",
-                                                                                        value: "warning",
-                                                                                },
-                                                                                {
-                                                                                        text: "Danger",
-                                                                                        value: "danger",
-                                                                                },
-                                                                        ],
-                                                                },
-                                                        },
-                                                },
-                                                {
-                                                        field: "icon",
-                                                        name: "Icon",
-                                                        type: "string",
-                                                        meta: {
-                                                                width: "half",
-                                                                interface: "select-icon",
-                                                        },
-                                                },
-                                                {
-                                                        field: "url",
-                                                        name: "URL",
-                                                        type: "string",
-                                                        meta: {
-                                                                width: "full",
-                                                                interface: "system-display-template",
-                                                                options: {
-                                                                        collectionName:
-                                                                                collection,
-                                                                        font: "monospace",
-                                                                        placeholder:
-                                                                                "/items/collection/{{ id }}",
-                                                                },
-                                                        },
-                                                },
-                                                {
-                                                        field: "method",
-                                                        name: "Method",
-                                                        type: "string",
-                                                        schema: {
-                                                                default_value:
-                                                                        "GET",
-                                                        },
-                                                        meta: {
-                                                                interface: "select-dropdown",
-                                                                width: "half",
-                                                                options: {
-                                                                        choices: [
-                                                                                {
-                                                                                        text: "GET",
-                                                                                        value: "GET",
-                                                                                },
-                                                                                {
-                                                                                        text: "POST",
-                                                                                        value: "POST",
-                                                                                },
-                                                                                {
-                                                                                        text: "PUT",
-                                                                                        value: "PUT",
-                                                                                },
-                                                                                {
-                                                                                        text: "PATCH",
-                                                                                        value: "PATCH",
-                                                                                },
-                                                                                {
-                                                                                        text: "DELETE",
-                                                                                        value: "DELETE",
-                                                                                },
-                                                                        ],
-                                                                },
-                                                        },
-                                                },
-                                                {
-                                                        field: "reload",
-                                                        name: "Reload",
-                                                        type: "boolean",
-                                                        schema: {
-                                                                default_value:
-                                                                        false,
-                                                        },
-                                                        meta: {
-                                                                interface: "boolean",
-                                                                width: "half",
-                                                        },
-                                                },
-                                                {
-                                                        field: "disabledConditions",
-                                                        name: "Disabled Conditions",
-                                                        type: "json",
-                                                        meta: {
-                                                                interface: "system-filter",
-                                                                options: {
-                                                                        collectionName:
-                                                                                collection,
-                                                                },
-                                                        },
-                                                },
-                                        ],
-                                },
-                        },
+              },
+            },
+            {
+              field: "type",
+              name: "Type",
+              type: "string",
+              schema: {
+                default_value: "normal",
+              },
+              meta: {
+                width: "half",
+                interface: "select-dropdown",
+                default_value: "normal",
+                options: {
+                  choices: [
+                    {
+                      text: "Primary",
+                      value: "primary",
+                    },
+                    {
+                      text: "Normal",
+                      value: "normal",
+                    },
+                    {
+                      text: "Info",
+                      value: "info",
+                    },
+                    {
+                      text: "Success",
+                      value: "success",
+                    },
+                    {
+                      text: "Warning",
+                      value: "warning",
+                    },
+                    {
+                      text: "Danger",
+                      value: "danger",
+                    },
+                  ],
                 },
-        ],
+              },
+            },
+            {
+              field: "icon",
+              name: "Icon",
+              type: "string",
+              meta: {
+                width: "half",
+                interface: "select-icon",
+              },
+            },
+            {
+              field: "url",
+              name: "URL",
+              type: "string",
+              meta: {
+                width: "full",
+                interface: "system-display-template",
+                options: {
+                  collectionName: collection,
+                  font: "monospace",
+                  placeholder: "/items/collection/{{ id }}",
+                },
+              },
+            },
+            {
+              field: "method",
+              name: "Method",
+              type: "string",
+              schema: {
+                default_value: "GET",
+              },
+              meta: {
+                interface: "select-dropdown",
+                width: "half",
+                options: {
+                  choices: [
+                    {
+                      text: "GET",
+                      value: "GET",
+                    },
+                    {
+                      text: "POST",
+                      value: "POST",
+                    },
+                    {
+                      text: "PUT",
+                      value: "PUT",
+                    },
+                    {
+                      text: "PATCH",
+                      value: "PATCH",
+                    },
+                    {
+                      text: "DELETE",
+                      value: "DELETE",
+                    },
+                  ],
+                },
+              },
+            },
+            {
+              field: "reload",
+              name: "Reload",
+              type: "boolean",
+              schema: {
+                default_value: false,
+              },
+              meta: {
+                interface: "boolean",
+                width: "half",
+              },
+            },
+            {
+              field: "disabledConditions",
+              name: "Disabled Conditions",
+              type: "json",
+              meta: {
+                interface: "system-filter",
+                options: {
+                  collectionName: collection,
+                },
+              },
+            },
+          ],
+        },
+      },
+    },
+  ],
 });
diff --git a/src/interface.vue b/src/interface.vue
index 94fdc14..3862920 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -1,26 +1,20 @@
 <template>
-        <div class="trigger-list" :class="[layout]">
-                <v-button
-                        v-for="(trigger, index) in triggers"
-                        :key="index"
-                        class="action"
-                        :class="[trigger.type]"
-                        :loading="loadings[index].value"
-                        :disabled="disableds[index]"
-                        :secondary="trigger.type !== 'primary'"
-                        v-bind="{ [trigger.size]: true }"
-                        @click="
-                                onClick(
-                                        trigger.method,
-                                        parsedUrls[index],
-                                        index
-                                )
-                        "
-                >
-                        <v-icon v-if="trigger.icon" left :name="trigger.icon" />
-                        <span v-if="trigger.label">{{ trigger.label }}</span>
-                </v-button>
-        </div>
+  <div class="trigger-list" :class="[layout]">
+    <v-button
+      v-for="(trigger, index) in triggers"
+      :key="index"
+      class="action"
+      :class="[trigger.type]"
+      :loading="loadings[index].value"
+      :disabled="disableds[index]"
+      :secondary="trigger.type !== 'primary'"
+      v-bind="{ [trigger.size]: true }"
+      @click="onClick(trigger.method, parsedUrls[index], index)"
+    >
+      <v-icon v-if="trigger.icon" left :name="trigger.icon" />
+      <span v-if="trigger.label">{{ trigger.label }}</span>
+    </v-button>
+  </div>
 </template>
 
 <script lang="ts">
@@ -32,150 +26,133 @@ import { render } from "micromustache";
 import { checkConditions } from "./check-conditions";
 
 type Trigger = {
-        label: string;
-        size: string;
-        type: string;
-        icon: string;
-        url: string;
-        method: string;
-        disabledConditions: Filter;
-        reload: boolean;
+  label: string;
+  size: string;
+  type: string;
+  icon: string;
+  url: string;
+  method: string;
+  disabledConditions: Filter;
+  reload: boolean;
 };
 
 export default defineComponent({
-        props: {
-                triggers: {
-                        type: Array as PropType<Trigger[]>,
-                        default: null,
-                },
-                layout: {
-                        type: String,
-                        default: "vertical",
-                },
-        },
-        setup(props) {
-                const api = useApi();
-                const { useNotificationsStore } = useStores();
-                const store = useNotificationsStore();
-                const router = useRouter();
-
-                const values = inject("values", ref<Record<string, any>>({}));
-                const parsedUrls = computed(() =>
-                        props.triggers.map((trigger) =>
-                                render(trigger.url ?? "", values.value)
-                        )
-                );
-                const disableds = computed(() =>
-                        props.triggers.map(
-                                (trigger) =>
-                                        trigger.disabledConditions &&
-                                        checkConditions(
-                                                values.value,
-                                                trigger.disabledConditions
-                                        )
-                        )
-                );
-
-                const loadings = props.triggers.map(() => ref(false));
-
-                return { loadings, parsedUrls, disableds, onClick };
-
-                async function onClick(
-                        method: string,
-                        url: string,
-                        index: number
-                ) {
-                        const loading = loadings[index];
-                        if (!loading) return;
-                        loading.value = true;
-
-                        try {
-                                const result = await api.request({
-                                        method,
-                                        url,
-                                });
-                                if (props.triggers[index]?.reload) {
-                                        router.go(0);
-                                } else {
-                                        store.add({
-                                                title:
-                                                        result.data?.title ||
-                                                        "Success",
-                                                text:
-                                                        result.data?.text ||
-                                                        "Action was completed successfully",
-                                                type: "success",
-                                                dialog:
-                                                        result.data?.dialog ||
-                                                        false,
-                                        });
-
-                                        if (result.data?.goto)
-                                                router.push(result.data.goto);
-                                }
-                        } catch (error: any) {
-                                const message =
-                                        error.response?.data?.errors?.[0]
-                                                ?.message ||
-                                        error.message ||
-                                        undefined;
-                                store.add({
-                                        title: "Error",
-                                        text: message,
-                                        type: "error",
-                                        dialog: true,
-                                        error,
-                                });
-                        } finally {
-                                loading.value = false;
-                        }
-                }
-        },
+  props: {
+    triggers: {
+      type: Array as PropType<Trigger[]>,
+      default: null,
+    },
+    layout: {
+      type: String,
+      default: "vertical",
+    },
+  },
+  setup(props) {
+    const api = useApi();
+    const { useNotificationsStore } = useStores();
+    const store = useNotificationsStore();
+    const router = useRouter();
+
+    const values = inject("values", ref<Record<string, any>>({}));
+    const parsedUrls = computed(() =>
+      props.triggers.map((trigger) => render(trigger.url ?? "", values.value))
+    );
+    const disableds = computed(() =>
+      props.triggers.map(
+        (trigger) =>
+          trigger.disabledConditions &&
+          checkConditions(values.value, trigger.disabledConditions)
+      )
+    );
+
+    const loadings = props.triggers.map(() => ref(false));
+
+    return { loadings, parsedUrls, disableds, onClick };
+
+    async function onClick(method: string, url: string, index: number) {
+      const loading = loadings[index];
+      if (!loading) return;
+      loading.value = true;
+
+      try {
+        const result = await api.request({
+          method,
+          url,
+        });
+        if (props.triggers[index]?.reload) {
+          router.go(0);
+        } else {
+          store.add({
+            title: result.data?.title || "Success",
+            text: result.data?.text || "Action was completed successfully",
+            type: "success",
+            dialog: result.data?.dialog || false,
+          });
+
+          if (result.data?.goto) router.push(result.data.goto);
+        }
+      } catch (error: any) {
+        const message =
+          error.response?.data?.errors?.[0]?.message ||
+          error.message ||
+          undefined;
+        store.add({
+          title: "Error",
+          text: message,
+          type: "error",
+          dialog: true,
+          error,
+        });
+      } finally {
+        loading.value = false;
+      }
+    }
+  },
 });
 </script>
 
 <style lang="scss" scoped>
 .trigger-list {
-        display: flex;
-        gap: 8px;
+  display: flex;
+  gap: 8px;
 
-        &.vertical {
-                flex-direction: column;
-        }
+  &.vertical {
+    flex-direction: column;
+  }
 
-        &.horizontal {
-                flex-wrap: wrap;
-        }
+  &.horizontal {
+    flex-wrap: wrap;
+  }
 }
 
 .action {
-        &.info {
-                --v-button-background-color: var(--blue);
-                --v-button-background-color-hover: var(--blue-125);
-                --v-button-color: var(--blue-alt);
-                --v-button-color-hover: var(--blue-alt);
-        }
-
-        &.success {
-                --v-button-background-color: var(--success);
-                --v-button-background-color-hover: var(--success-125);
-                --v-button-color: var(--success-alt);
-                --v-button-color-hover: var(--success-alt);
-        }
-
-        &.warning {
-                --v-button-background-color: var(--warning);
-                --v-button-background-color-hover: var(--warning-125);
-                --v-button-color: var(--warning-alt);
-                --v-button-color-hover: var(--warning-alt);
-        }
-
-        &.danger {
-                --v-button-icon-color: var(--white);
-                --v-button-background-color: var(--danger);
-                --v-button-background-color-hover: var(--danger-125);
-                --v-button-color: var(--danger-alt);
-                --v-button-color-hover: var(--danger-alt);
-        }
+  &.info {
+    --v-button-background-color: var(--blue);
+    --v-button-background-color-hover: var(--blue-125);
+    --v-button-color: var(--blue-alt);
+    --v-button-color-hover: var(--blue-alt);
+  }
+
+  &.success {
+    --v-button-background-color: var(--success);
+    --v-button-background-color-hover: var(--success-125);
+    --v-button-color: var(--success-alt);
+    --v-button-color-hover: var(--success-alt);
+  }
+
+  &.warning {
+    --v-button-background-color: var(--warning);
+    --v-button-background-color-hover: var(--warning-125);
+    --v-button-color: var(--warning-alt);
+    --v-button-color-hover: var(--warning-alt);
+  }
+
+  &.danger {
+    --v-button-icon-color: var(--white);
+    --v-button-background-color: var(--danger);
+    --v-button-background-color-hover: var(--danger-125);
+    --v-button-color: var(--danger-alt);
+    --v-button-color-hover: var(--danger-alt);
+  }
 }
 </style>

From e0bf83fc6e14fce8efb26d434450b4cb6d5dc561 Mon Sep 17 00:00:00 2001
From: kamil-malinski <68733431+kamil-malinski@users.noreply.github.com>
Date: Mon, 15 Jan 2024 14:53:35 +0100
Subject: [PATCH 5/5] adds the ability to respond with error message

---
 src/interface.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/interface.vue b/src/interface.vue
index 3862920..2eabaaf 100644
--- a/src/interface.vue
+++ b/src/interface.vue
@@ -85,7 +85,7 @@ export default defineComponent({
           store.add({
             title: result.data?.title || "Success",
             text: result.data?.text || "Action was completed successfully",
-            type: "success",
+            type: result.data?.type || "success",
             dialog: result.data?.dialog || false,
           });