yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

V15: Enable umbraco-extension client to auto-build (#18597)

Browse Source 
* feat: adds autobuild of umbraco extensions created by the dotnet template

* adds file extensions to imports to follow the esmodule convention + apply formatting

* build(deps): upgrade hey-api, vite, typescript and generate new api

* chore: formatting

* clean up actions as client is now automatically being built when starting the site

* revert change with UMBRACO_VERSION_FROM_TEMPLATE

* revert if(includeExample)

* use template name

* use template name

* feat: update the way it sets the auth token

* add back in IncludeExample if

* fix: rename allowPackageTelemetry to allowTelemetry because that is what it is actually called

* `.csproj` amends

- Adds `BeforeTargets` to "BuildClient" target
- Adds "package.json" to "RestoreClient" target input
- Removes extra parameters from `npm i` command

---------

Co-authored-by: leekelleher <leekelleher@gmail.com>
This commit is contained in:
Jacob Overgaard
2025-03-11 17:14:47 +01:00
committed by GitHub
parent 2cc9d2cab0
commit df6a88b4d5
17 changed files with 410 additions and 611 deletions
Download Patch File Download Diff File Expand all files Collapse all files

170
templates/UmbracoExtension/Client/src/dashboards/dashboard.element.ts
View File

@@ -1,13 +1,24 @@
import { LitElement, css, html, customElement, state } from "@umbraco-cms/backoffice/external/lit";
import {
LitElement,
css,
html,
customElement,
state,
} from "@umbraco-cms/backoffice/external/lit";
import { UmbElementMixin } from "@umbraco-cms/backoffice/element-api";
import { UmbracoExtensionService, UserModel } from "../api";
import { UUIButtonElement } from "@umbraco-cms/backoffice/external/uui";
import { UMB_NOTIFICATION_CONTEXT, UmbNotificationContext } from "@umbraco-cms/backoffice/notification";
import { UMB_CURRENT_USER_CONTEXT, UmbCurrentUserModel } from "@umbraco-cms/backoffice/current-user";
import {
UMB_NOTIFICATION_CONTEXT,
UmbNotificationContext,
} from "@umbraco-cms/backoffice/notification";
import {
UMB_CURRENT_USER_CONTEXT,
UmbCurrentUserModel,
} from "@umbraco-cms/backoffice/current-user";
import { UmbracoExtensionService, UserModel } from "../api/index.js";
@customElement('example-dashboard')
@customElement("example-dashboard")
export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
@state()
private _yourName: string | undefined = "Press the button!";
@@ -28,7 +39,6 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
});
this.consumeContext(UMB_CURRENT_USER_CONTEXT, (currentUserContext) => {
// When we have the current user context
// We can observe properties from it, such as the current user or perhaps just individual properties
// When the currentUser object changes we will get notified and can reset the @state properrty
@@ -62,10 +72,10 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
data: {
headline: `You are ${this._serverUserData?.name}`,
message: `Your email is ${this._serverUserData?.email}`,
}
})
},
});
}
}
};
#onClickWhatsTheTimeMrWolf = async (ev: Event) => {
const buttonElement = ev.target as UUIButtonElement;
@@ -84,7 +94,7 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
this._timeFromMrWolf = new Date(data);
buttonElement.state = "success";
}
}
};
#onClickWhatsMyName = async (ev: Event) => {
const buttonElement = ev.target as UUIButtonElement;
@@ -100,77 +110,111 @@ export class ExampleDashboardElement extends UmbElementMixin(LitElement) {
this._yourName = data;
buttonElement.state = "success";
}
};
render() {
return html`
<uui-box headline="Who am I?">
<div slot="header">[Server]</div>
<h2><uui-icon name="icon-user"></uui-icon>${this._serverUserData?.email ? this._serverUserData.email : 'Press the button!'}</h2>
<ul>
${this._serverUserData?.groups.map(group => html`<li>${group.name}</li>`)}
</ul>
<uui-button color="default" look="primary" @click="${this.#onClickWhoAmI}">
Who am I?
</uui-button>
<p>This endpoint gets your current user from the server and displays your email and list of user groups.
It also displays a Notification with your details.</p>
</uui-box>
<uui-box headline="Who am I?">
<div slot="header">[Server]</div>
<h2>
<uui-icon name="icon-user"></uui-icon>${this._serverUserData?.email
? this._serverUserData.email
: "Press the button!"}
</h2>
<ul>
${this._serverUserData?.groups.map(
(group) => html`<li>${group.name}</li>`
)}
</ul>
<uui-button
color="default"
look="primary"
@click="${this.#onClickWhoAmI}"
>
Who am I?
</uui-button>
<p>
This endpoint gets your current user from the server and displays your
email and list of user groups. It also displays a Notification with
your details.
</p>
</uui-box>
<uui-box headline="What's my Name?">
<div slot="header">[Server]</div>
<h2><uui-icon name="icon-user"></uui-icon> ${this._yourName }</h2>
<uui-button color="default" look="primary" @click="${this.#onClickWhatsMyName}">
Whats my name?
</uui-button>
<p>This endpoint has a forced delay to show the button 'waiting' state for a few seconds before completing the request.</p>
</uui-box>
<uui-box headline="What's my Name?">
<div slot="header">[Server]</div>
<h2><uui-icon name="icon-user"></uui-icon> ${this._yourName}</h2>
<uui-button
color="default"
look="primary"
@click="${this.#onClickWhatsMyName}"
>
Whats my name?
</uui-button>
<p>
This endpoint has a forced delay to show the button 'waiting' state
for a few seconds before completing the request.
</p>
</uui-box>
<uui-box headline="What's the Time?">
<div slot="header">[Server]</div>
<h2><uui-icon name="icon-alarm-clock"></uui-icon> ${this._timeFromMrWolf ? this._timeFromMrWolf.toLocaleString() : 'Press the button!'}</h2>
<uui-button color="default" look="primary" @click="${this.#onClickWhatsTheTimeMrWolf}">
Whats the time Mr Wolf?
</uui-button>
<p>This endpoint gets the current date and time from the server.</p>
</uui-box>
<uui-box headline="What's the Time?">
<div slot="header">[Server]</div>
<h2>
<uui-icon name="icon-alarm-clock"></uui-icon> ${this._timeFromMrWolf
? this._timeFromMrWolf.toLocaleString()
: "Press the button!"}
</h2>
<uui-button
color="default"
look="primary"
@click="${this.#onClickWhatsTheTimeMrWolf}"
>
Whats the time Mr Wolf?
</uui-button>
<p>This endpoint gets the current date and time from the server.</p>
</uui-box>
<uui-box headline="Who am I?" class="wide">
<div slot="header">[Context]</div>
<p>Current user email: <b>${this._contextCurrentUser?.email}</b></p>
<p>This is the JSON object available by consuming the 'UMB_CURRENT_USER_CONTEXT' context:</p>
<umb-code-block language="json" copy>${JSON.stringify(this._contextCurrentUser, null, 2)}</umb-code-block>
</uui-box>
<uui-box headline="Who am I?" class="wide">
<div slot="header">[Context]</div>
<p>Current user email: <b>${this._contextCurrentUser?.email}</b></p>
<p>
This is the JSON object available by consuming the
'UMB_CURRENT_USER_CONTEXT' context:
</p>
<umb-code-block language="json" copy
>${JSON.stringify(this._contextCurrentUser, null, 2)}</umb-code-block
>
</uui-box>
`;
}
static styles = [
css`
:host {
display: grid;
gap: var(--uui-size-layout-1);
padding: var(--uui-size-layout-1);
grid-template-columns: 1fr 1fr 1fr;
}
:host {
display: grid;
gap: var(--uui-size-layout-1);
padding: var(--uui-size-layout-1);
grid-template-columns: 1fr 1fr 1fr;
}
uui-box {
margin-bottom: var(--uui-size-layout-1);
}
uui-box {
margin-bottom: var(--uui-size-layout-1);
}
h2 {
margin-top:0;
}
h2 {
margin-top: 0;
}
.wide {
grid-column: span 3;
}
`];
.wide {
grid-column: span 3;
}
`,
];
}
export default ExampleDashboardElement;
declare global {
interface HTMLElementTagNameMap {
'example-dashboard': ExampleDashboardElement;
"example-dashboard": ExampleDashboardElement;
}
}