harry/keystone
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Header layout rather than sidebar layout

Browse Source
This commit is contained in:
Harry (hjbdev)
2025-04-08 19:17:12 +01:00
parent a7386814c7
commit bde11c0b8c
8 changed files with 131 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

54
resources/js/pages/Applications/Index.vue Normal file
View File

@@ -0,0 +1,54 @@
<script setup>
import { Badge } from '@/components/ui/badge';
import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import AppLayout from '@/layouts/AppLayout.vue';
import { Head, Link } from '@inertiajs/vue3';
const props = defineProps({
applications: {
type: [Object, null],
required: true,
},
});
</script>
<template>
<Head title="Dashboard" />
<AppLayout
:breadcrumbs="[
{
title: 'Applications',
href: route('applications.index', {
organisation: $page.props.organisation.id,
}),
},
]"
>
<div class="flex justify-between items-center gap-3 p-4">
<h2 class="text-3xl font-bold tracking-tight">Applications</h2>
<div>
<!-- <Button :as="Link" :href="route('applications.create', {
organisation: $page.props.organisation.id,
})">Create</Button> -->
</div>
</div>
<div class="grid gap-4 rounded-xl p-4 md:grid-cols-2 lg:grid-cols-3">
<Card v-for="application in applications.data" :key="`application{$applications.id}`" class="relative w-full">
<CardHeader>
<CardTitle>{{ application.name }}</CardTitle>
</CardHeader>
<Link
:href="
route('applications.show', {
organisation: $page.props.organisation.id,
application: application.id,
})
"
class="absolute inset-0"
></Link>
</Card>
</div>
</AppLayout>
</template>

37
resources/js/pages/Dashboard.vue
View File

@@ -1,8 +1,16 @@
<script setup lang="ts">
import AppLayout from '@/layouts/AppLayout.vue';
import { type BreadcrumbItem } from '@/types';
import { Head } from '@inertiajs/vue3';
import PlaceholderPattern from '../components/PlaceholderPattern.vue';
import { Head, Link } from '@inertiajs/vue3';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
import { ChevronRightIcon } from 'lucide-vue-next';
defineProps({
organisations: {
type: Array,
required: true,
},
});
const breadcrumbs: BreadcrumbItem[] = [
{
@@ -16,16 +24,21 @@ const breadcrumbs: BreadcrumbItem[] = [
<Head title="Dashboard" />
<AppLayout :breadcrumbs="breadcrumbs">
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4">
<div>The plan:</div>
<div>Organisations have applications</div>
<div>Applications have environments</div>
<div>Servers have services</div>
<div>Services have slices, this could be a database table or a client in a websocket server</div>
<div>Environments have SLICES</div>
<div>Also servers need to be provisioned</div>
<div>Users have SSH keys</div>
<div>Keystone has its own SSH keys</div>
<div class="flex h-full flex-1 flex-col gap-4 rounded-xl p-4 items-center">
<Card class="w-80">
<CardHeader class="border-b border-b-muted-background">
<CardTitle>Your Organisation</CardTitle>
<CardDescription>
Select an organisation to view its details.
</CardDescription>
</CardHeader>
<CardContent class="divide-y divide-y-muted-foreground p-0">
<Link v-for="organisation in organisations" :href="route('organisations.show', { organisation: organisation.id })" class="py-3 px-6 hover:bg-muted flex justify-between items-center">
<div>{{ organisation.name }}</div>
<ChevronRightIcon class="size-4 text-muted-foreground" />
</Link>
</CardContent>
</Card>
</div>
</AppLayout>
</template>

2
resources/js/pages/organisations/Show.vue
View File

@@ -82,7 +82,7 @@ defineProps({
<template #fallback> Loading... </template>
<h3 class="mt-4 text-2xl font-bold tracking-tight">Server Providers</h3>
<p class="mb-4 text-sm text-muted-foreground">Manage your server providers.</p>
<div class="border-muted-background divide-y-muted-background divide-y rounded-md border">
<div class="border-muted-background divide-y-muted-background divide-y rounded-md border max-w-80">
<div v-for="provider in providers" class="flex items-center gap-2 px-2 py-1">
{{ provider.name }}
<span class="ml-auto text-xs uppercase text-muted-foreground">{{ provider.type }}</span>