Add RouteButton
This commit is contained in:
parent
5a944f9916
commit
a0d186da3a
2 changed files with 40 additions and 2 deletions
33
frontend/src/components/form/RouteButton.vue
Normal file
33
frontend/src/components/form/RouteButton.vue
Normal file
|
@ -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>
|
|
@ -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 AdminDashboardView from "@/views/AdminDashboardView.vue";
|
||||||
import AdminNodesView from "@/views/AdminNodesView.vue";
|
import AdminNodesView from "@/views/AdminNodesView.vue";
|
||||||
import HomeView from "@/views/HomeView.vue";
|
import HomeView from "@/views/HomeView.vue";
|
||||||
import {isNodesFilter, isNodeSortField, isSortDirection, type SearchTerm} from "@/types";
|
import {isNodesFilter, isNodeSortField, isSortDirection, type SearchTerm} from "@/types";
|
||||||
|
|
||||||
|
export interface Route {
|
||||||
|
name: RouteName;
|
||||||
|
query?: LocationQueryRaw;
|
||||||
|
}
|
||||||
|
|
||||||
export enum RouteName {
|
export enum RouteName {
|
||||||
HOME = "home",
|
HOME = "home",
|
||||||
ADMIN = "admin",
|
ADMIN = "admin",
|
||||||
ADMIN_NODES = "admin-nodes",
|
ADMIN_NODES = "admin-nodes",
|
||||||
}
|
}
|
||||||
|
|
||||||
export function route(name: RouteName, query?: LocationQueryRaw): RouteLocationRaw {
|
export function route(name: RouteName, query?: LocationQueryRaw): Route {
|
||||||
return {
|
return {
|
||||||
name,
|
name,
|
||||||
query,
|
query,
|
||||||
|
|
Loading…
Reference in a new issue