Skip to content

Commit 6a2a4e7

Browse files
mythzmythz
committed
Refactor Admin ui to use Blazor page
1 parent 658034c commit 6a2a4e7

File tree

11 files changed

+431
-214
lines changed

11 files changed

+431
-214
lines changed

‎MyApp/Components/App.razor‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
["vue"] = ("/lib/mjs/vue.mjs", "/lib/mjs/vue.min.mjs"),
1717
["@servicestack/client"] = ("/lib/mjs/servicestack-client.mjs", "/lib/mjs/servicestack-client.min.mjs"),
1818
["@servicestack/vue"] = ("/lib/mjs/servicestack-vue.mjs", "/lib/mjs/servicestack-vue.min.mjs"),
19+
["dtos.mjs"] = ("/mjs/dtos.mjs", "/mjs/dtos.mjs"),
1920
})
2021

2122
<HeadOutlet />

‎MyApp/Components/Layout/AdminLayout.razor‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
@inherits LayoutComponentBase
2+
@inject IServiceGatewayFactory GatewayFactory
3+
4+
<script>window.Server = @metadataHtml</script>
5+
<script type="module">
6+
import { useAuth, useMetadata } from "@@servicestack/vue"
7+
const { signIn } = useAuth()
8+
signIn(@authJson)
9+
10+
const { loadMetadata } = useMetadata()
11+
loadMetadata({
12+
olderThan: null
13+
})
14+
</script>
15+
16+
<div class="min-h-screen">
17+
<Header />
18+
19+
<main role="main">
20+
@Body
21+
</main>
22+
</div>
23+
24+
<script type="module">
25+
import { remount } from "/mjs/app.mjs"
26+
remount()
27+
</script>
28+
29+
<div id="blazor-error-ui" class="hidden fixed bottom-0 w-full z-10">
30+
<div class="flex rounded-md bg-yellow-50 p-4 m-4">
31+
<div class="flex-shrink-0">
32+
<!-- Heroicon name: solid/exclamation -->
33+
<svg class="h-5 w-5 text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
34+
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
35+
</svg>
36+
</div>
37+
<div class="ml-3">
38+
<environment include="Staging,Production">
39+
<h3 class="text-sm font-medium text-yellow-800">An error has occurred. This application may no longer respond until reloaded.</h3>
40+
</environment>
41+
<environment include="Development">
42+
<h3 class="text-sm font-medium text-yellow-800">An unhandled exception has occurred. See browser dev tools for details.</h3>
43+
</environment>
44+
<div class="mt-4">
45+
<div class="-mx-2 -my-1.5 flex">
46+
<button type="button" class="reload bg-yellow-50 px-2 py-1.5 rounded-md text-sm font-medium text-yellow-800 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">Reload</button>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="ml-auto pl-3">
51+
<div class="-mx-1.5 -my-1.5">
52+
<button type="button" class="dismiss inline-flex bg-yellow-50 rounded-md p-1.5 text-yellow-500 hover:bg-yellow-100 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-yellow-50 focus:ring-yellow-600">
53+
<span class="sr-only">Dismiss</span>
54+
<!-- Heroicon name: solid/x -->
55+
<svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
56+
<path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
57+
</svg>
58+
</button>
59+
</div>
60+
</div>
61+
</div>
62+
</div>
63+
64+
@code {
65+
MarkupString? metadataHtml = null;
66+
MarkupString? authJson = null;
67+
[CascadingParameter]
68+
private HttpContext HttpContext { get; set; } = default!;
69+
70+
protected override async Task OnInitializedAsync()
71+
{
72+
await base.OnInitializedAsync();
73+
var gateway = GatewayFactory.GetServiceGateway(HttpContext.ToRequest());
74+
metadataHtml = await gateway.ApiAsJsonAsync(new MetadataApp());
75+
authJson = await gateway.ApiAsJsonAsync(new Authenticate());
76+
}
77+
}

‎MyApp/Components/Pages/Admin.razor‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
@page "/admin"
2+
@layout Layout.AdminLayout
3+
4+
<PageTitle>Admin</PageTitle>
5+
6+
<div data-component="pages/Admin.mjs"></div>

‎MyApp/Components/Pages/Home.razor‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
</p>
1414
<div class="mx-auto mt-5 sm:flex sm:justify-center md:mt-8">
1515
<div class="rounded-md shadow">
16-
<a href="/admin/[email protected]&pass=p@55wOrd" class="flex w-full items-center justify-center rounded-md border border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 px-8 py-3 text-base font-medium text-indigo-600 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 md:py-4 md:px-10 md:text-lg">
16+
<a href="/admin" class="flex w-full items-center justify-center rounded-md border border-transparent bg-white dark:bg-gray-800 dark:border-gray-600 px-8 py-3 text-base font-medium text-indigo-600 dark:text-gray-100 hover:bg-gray-50 dark:hover:bg-gray-700 md:py-4 md:px-10 md:text-lg">
1717
Admin UI
1818
</a>
1919
</div>

‎MyApp/Components/Shared/Footer.razor‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,10 @@
55
<NavLink href="about" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">About</NavLink>
66
</div>
77

8+
<div class="pb-6">
9+
<NavLink href="crud" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">CRUD APIs + UI</NavLink>
10+
</div>
11+
812
<div class="pb-6">
913
<NavLink href="deploy" class="text-sm leading-6 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-50">Deploy</NavLink>
1014
</div>

‎MyApp/wwwroot/admin/index.html‎

Lines changed: 0 additions & 211 deletions
This file was deleted.

‎MyApp/wwwroot/admin/sections/Bookings.mjs‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,22 @@ export default {
77
template:`<AutoQueryGrid :type="type"
88
selected-columns="id,name,roomType,roomNumber,bookingStartDate,bookingEndDate,cost,couponId,discount"
99
:header-titles="{ roomNumber:'Room No', bookingStartDate:'Start Date', bookingEndDate:'End Date', couponId:'Coupon' }"
10-
:visible-from="{ roomNumber:'lg', bookingEndDate:'xl', cost:'md', couponId:'xl', discount:'never' }" />`,
10+
:visible-from="{ roomNumber:'lg', bookingEndDate:'xl', cost:'md', couponId:'xl', discount:'never' }">
11+
<template #formfooter="{ form, type, apis, model, id }">
12+
<AuditEvents v-if="form === 'edit'" class="mt-4" :key="id" :type="type" :id="id" />
13+
</template>
14+
</AutoQueryGrid>`,
1115
},
1216
},
1317
Coupons: {
1418
type: 'Coupon',
1519
component: {
1620
template:`<AutoQueryGrid :type="type"
17-
selected-columns="id,name,description,discount,expiryDate" />`,
21+
selected-columns="id,name,description,discount,expiryDate">
22+
<template #formfooter="{ form, type, apis, model, id }">
23+
<AuditEvents v-if="form === 'edit'" class="mt-4" :key="id" :type="type" :id="id" />
24+
</template>
25+
</AutoQueryGrid>`,
1826
},
1927
},
2028
},

‎MyApp/wwwroot/css/app.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1777,6 +1777,11 @@ select{
17771777
gap: 2rem;
17781778
}
17791779

1780+
.gap-x-2 {
1781+
-moz-column-gap: 0.5rem;
1782+
column-gap: 0.5rem;
1783+
}
1784+
17801785
.gap-x-3 {
17811786
-moz-column-gap: 0.75rem;
17821787
column-gap: 0.75rem;
@@ -4273,6 +4278,11 @@ select{
42734278
color: rgb(255 255 255 / var(--tw-text-opacity, 1));
42744279
}
42754280

4281+
.dark\:hover\:text-indigo-300:hover:is(.dark *) {
4282+
--tw-text-opacity: 1;
4283+
color: rgb(165 180 252 / var(--tw-text-opacity, 1));
4284+
}
4285+
42764286
.dark\:hover\:file\:bg-violet-800:is(.dark *)::file-selector-button:hover {
42774287
--tw-bg-opacity: 1;
42784288
background-color: rgb(91 33 182 / var(--tw-bg-opacity, 1));

‎MyApp/wwwroot/mjs/app.mjs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { createApp, reactive, ref, computed } from "vue"
22
import { JsonServiceClient, $1, $$ } from "@servicestack/client"
33
import ServiceStackVue from "@servicestack/vue"
44
import GettingStarted from "./components/GettingStarted.mjs"
5+
import AuditEvents from "./components/AuditEvents.mjs"
56

67
let client = null, Apps = []
78
let AppData = {
@@ -12,6 +13,7 @@ export { client, Apps }
1213
/** Shared Global Components */
1314
const Components = {
1415
GettingStarted,
16+
AuditEvents,
1517
}
1618
const CustomElements = [
1719
'lite-youtube'

0 commit comments

Comments
 (0)