Skip to content

Commit fb7c00a

Browse files
mythzmythz
committed
Update Vue docs
1 parent 137c369 commit fb7c00a

File tree

4 files changed

+94
-80
lines changed

4 files changed

+94
-80
lines changed

‎MyApp/_pages/vue/autoquerygrid.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,9 @@ Which columns are displayed and how they're formatted are further customizable w
159159
<span class="hidden lg:inline">Room </span>No
160160
</template>
161161

162-
<template #cost="{ cost }" v-html="currency(cost)"></template>
162+
<template #cost="{ cost }">
163+
<span v-html="currency(cost)"></span>
164+
</template>
163165

164166
<template #bookingStartDate-header>
165167
Start<span class="hidden lg:inline"> Date</span>
@@ -176,6 +178,8 @@ Which columns are displayed and how they're formatted are further customizable w
176178
</AutoQueryGrid>
177179
```
178180

181+
<responsive class="not-prose mb-4"></responsive>
182+
179183
<h2 class="pt-8 mb-4 text-2xl font-semibold text-gray-900 dark:text-gray-100">
180184
Custom Functionality
181185
</h2>

‎MyApp/wwwroot/pages/vue/autoquerygrid.mjs

Lines changed: 7 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,12 @@
1-
import { ref, onMounted } from "vue"
2-
import { Authenticate, QueryCoupons } from "./dtos.mjs"
3-
import { useAuth, useClient, useFormatters } from '@servicestack/vue'
1+
import { onMounted } from "vue"
2+
import { Authenticate } from "./dtos.mjs"
3+
import { useAuth, useClient } from '@servicestack/vue'
44
import { JsonApiClient } from "@servicestack/client"
5-
6-
export const Responsive = {
7-
template:`<AutoQueryGrid type="Booking" :visibleFrom="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl', createdBy:'2xl' }">
8-
<template #id="{ id }">
9-
<span class="text-gray-900">{{ id }}</span>
10-
</template>
11-
12-
<template #name="{ name }">
13-
{{ name }}
14-
</template>
15-
16-
<template #roomNumber-header>
17-
<span class="hidden lg:inline">Room </span>No
18-
</template>
19-
20-
<template #cost="{ cost }">{{ currency(cost) }}</template>
21-
22-
<template #bookingStartDate-header>
23-
Start<span class="hidden lg:inline"> Date</span>
24-
</template>
25-
26-
<template #bookingEndDate-header>
27-
End<span class="hidden lg:inline"> Date</span>
28-
</template>
29-
30-
<template #createdBy-header>
31-
Employee
32-
</template>
33-
<template #createdBy="{ createdBy }">{{ createdBy }}</template>
34-
</AutoQueryGrid>`,
35-
setup() {
36-
const client = useClient()
37-
const coupon = ref()
38-
const { currency } = useFormatters()
39-
40-
/** @param {string} id */
41-
async function showCoupon(id) {
42-
const api = await client.api(new QueryCoupons({ id }))
43-
if (api.succeeded) {
44-
coupon.value = api.response.results[0]
45-
}
46-
}
47-
const close = () => coupon.value = null
48-
49-
return { coupon, showCoupon, close, currency }
50-
}
51-
}
52-
53-
export const CustomBooking = {
54-
template:`<div>
55-
<AutoQueryGrid type="Booking" selectedColumns="id,name,cost,bookingStartDate,bookingEndDate,discount">
56-
<template #discount="{ discount }">
57-
<TextLink v-if="discount" class="flex items-end" @click.stop="showCoupon(discount.id)" :title="discount.id">
58-
<Icon class="w-5 h-5 mr-1" type="Coupon" />
59-
<PreviewFormat :value="discount.description" />
60-
</TextLink>
61-
</template>
62-
</AutoQueryGrid>
63-
<AutoEditForm v-if="coupon" type="UpdateCoupon" v-model="coupon" @done="close" @save="close" />
64-
</div>`,
65-
setup() {
66-
const client = useClient()
67-
const coupon = ref()
68-
/** @param {string} id */
69-
async function showCoupon(id) {
70-
const api = await client.api(new QueryCoupons({ id }))
71-
if (api.succeeded) {
72-
coupon.value = api.response.results[0]
73-
}
74-
}
75-
const close = () => coupon.value = null
76-
return { coupon, showCoupon, close }
77-
}
78-
}
5+
import Responsive from "./autoquerygrid/Responsive.mjs"
6+
import CustomBooking from "./autoquerygrid/CustomBooking.mjs"
797

808
export default {
819
install(app) {
82-
console.log('install(app)')
8310
app.provide('client', JsonApiClient.create('https://blazor-gallery-api.jamstacks.net'))
8411
},
8512
components: {
@@ -90,7 +17,8 @@ export default {
9017
const client = useClient()
9118

9219
onMounted(async () => {
93-
const api = await client.api(new Authenticate({ provider: 'credentials', userName:'[email protected]', password:'p@55wOrd' }))
20+
const api = await client.api(new Authenticate({
21+
provider: 'credentials', userName:'[email protected]', password:'p@55wOrd' }))
9422
if (api.succeeded) {
9523
const { signIn } = useAuth()
9624
signIn(api.response)

‎MyApp/wwwroot/pages/vue/autoquerygrid/CustomBooking.mjs

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
import { ref } from "vue"
2+
import { useClient } from "@servicestack/vue"
3+
import { QueryCoupons } from "../dtos.mjs"
4+
5+
export default {
6+
template:`<div>
7+
<AutoQueryGrid type="Booking" selectedColumns="id,name,cost,bookingStartDate,bookingEndDate,discount">
8+
<template #discount="{ discount }">
9+
<TextLink v-if="discount" class="flex items-end" @click.stop="showCoupon(discount.id)" :title="discount.id">
10+
<Icon class="w-5 h-5 mr-1" type="Coupon" />
11+
<PreviewFormat :value="discount.description" />
12+
</TextLink>
13+
</template>
14+
</AutoQueryGrid>
15+
<AutoEditForm v-if="coupon" type="UpdateCoupon" v-model="coupon" @done="close" @save="close" />
16+
</div>`,
17+
setup() {
18+
const client = useClient()
19+
const coupon = ref()
20+
/** @param {string} id */
21+
async function showCoupon(id) {
22+
const api = await client.api(new QueryCoupons({ id }))
23+
if (api.succeeded) {
24+
coupon.value = api.response.results[0]
25+
}
26+
}
27+
const close = () => coupon.value = null
28+
return { coupon, showCoupon, close }
29+
}
30+
}

‎MyApp/wwwroot/pages/vue/autoquerygrid/Responsive.mjs

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import { ref } from "vue"
2+
import { useClient, useFormatters } from "@servicestack/vue"
3+
import { QueryCoupons } from "../dtos.mjs"
4+
5+
export default {
6+
template:`<AutoQueryGrid type="Booking" :visibleFrom="{ name:'xl', bookingStartDate:'sm', bookingEndDate:'xl', createdBy:'2xl' }">
7+
<template #id="{ id }">
8+
<span class="text-gray-900">{{ id }}</span>
9+
</template>
10+
11+
<template #name="{ name }">
12+
{{ name }}
13+
</template>
14+
15+
<template #roomNumber-header>
16+
<span class="hidden lg:inline">Room </span>No
17+
</template>
18+
19+
<template #cost="{ cost }">
20+
<span v-html="currency(cost)"></span>
21+
</template>
22+
23+
<template #bookingStartDate-header>
24+
Start<span class="hidden lg:inline"> Date</span>
25+
</template>
26+
27+
<template #bookingEndDate-header>
28+
End<span class="hidden lg:inline"> Date</span>
29+
</template>
30+
31+
<template #createdBy-header>
32+
Employee
33+
</template>
34+
<template #createdBy="{ createdBy }">{{ createdBy }}</template>
35+
</AutoQueryGrid>`,
36+
setup() {
37+
const client = useClient()
38+
const coupon = ref()
39+
const { currency } = useFormatters()
40+
41+
/** @param {string} id */
42+
async function showCoupon(id) {
43+
const api = await client.api(new QueryCoupons({ id }))
44+
if (api.succeeded) {
45+
coupon.value = api.response.results[0]
46+
}
47+
}
48+
const close = () => coupon.value = null
49+
50+
return { coupon, showCoupon, close, currency }
51+
}
52+
}

0 commit comments

Comments
 (0)