From a0d186da3af295a3fbff24ddaab1ed4eca0c3df7 Mon Sep 17 00:00:00 2001
From: baldo <baldo@toppoint.de>
Date: Tue, 23 Aug 2022 15:52:26 +0200
Subject: [PATCH] Add RouteButton

---
 frontend/src/components/form/RouteButton.vue | 33 ++++++++++++++++++++
 frontend/src/router/index.ts                 |  9 ++++--
 2 files changed, 40 insertions(+), 2 deletions(-)
 create mode 100644 frontend/src/components/form/RouteButton.vue

diff --git a/frontend/src/components/form/RouteButton.vue b/frontend/src/components/form/RouteButton.vue
new file mode 100644
index 0000000..256941c
--- /dev/null
+++ b/frontend/src/components/form/RouteButton.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type {ButtonSize, ComponentVariant} from "@/types";
+import type {Route} from "@/router";
+import router from "@/router";
+import ActionButton from "@/components/form/ActionButton.vue";
+
+interface Props {
+    variant: ComponentVariant;
+    size: ButtonSize;
+    icon: string;
+    route: Route;
+}
+
+const props = defineProps<Props>();
+
+async function onClick() {
+    await router.push(props.route);
+}
+</script>
+
+<template>
+    <ActionButton
+        :variant="variant"
+        :size="size"
+        :icon="icon"
+        @click="onClick"
+    >
+        <slot/>
+    </ActionButton>
+</template>
+
+<style scoped lang="scss">
+</style>
diff --git a/frontend/src/router/index.ts b/frontend/src/router/index.ts
index 0394c0c..24498ea 100644
--- a/frontend/src/router/index.ts
+++ b/frontend/src/router/index.ts
@@ -1,16 +1,21 @@
-import {createRouter, createWebHistory, type LocationQueryRaw, type RouteLocationRaw} from "vue-router";
+import {createRouter, createWebHistory, type LocationQueryRaw} from "vue-router";
 import AdminDashboardView from "@/views/AdminDashboardView.vue";
 import AdminNodesView from "@/views/AdminNodesView.vue";
 import HomeView from "@/views/HomeView.vue";
 import {isNodesFilter, isNodeSortField, isSortDirection, type SearchTerm} from "@/types";
 
+export interface Route {
+    name: RouteName;
+    query?: LocationQueryRaw;
+}
+
 export enum RouteName {
     HOME = "home",
     ADMIN = "admin",
     ADMIN_NODES = "admin-nodes",
 }
 
-export function route(name: RouteName, query?: LocationQueryRaw): RouteLocationRaw {
+export function route(name: RouteName, query?: LocationQueryRaw): Route {
     return {
         name,
         query,