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

add another level to packages section to accomodate the details page

Browse Source
This commit is contained in:
Jacob Overgaard
2022-09-07 13:29:32 +02:00
parent 83e0c750bc
commit de0b507f8d
4 changed files with 119 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-details.element.ts Normal file
View File

@@ -0,0 +1,27 @@
import { html, LitElement } from 'lit';
import { customElement, property } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
@customElement('umb-packages-details')
export class UmbPackagesDetails extends UmbContextConsumerMixin(LitElement) {
@property()
id!: string;
connectedCallback() {
super.connectedCallback();
console.log(this.id);
}
render() {
return html` <h1>Showing details of ${this.id}</h1> `;
}
}
export default UmbPackagesDetails;
declare global {
interface HTMLElementTagNameMap {
'umb-packages-details': UmbPackagesDetails;
}
}

73
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-editor.element.ts Normal file
View File

@@ -0,0 +1,73 @@
import '../../editors/shared/editor-entity/editor-entity.element';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionRegistry } from '../../../core/extension';
@customElement('umb-packages-editor')
export class UmbPackagesEditor extends UmbContextConsumerMixin(LitElement) {
private umbExtensionRegistry?: UmbExtensionRegistry;
constructor() {
super();
this.consumeContext('umbExtensionRegistry', (umbExtensionRegistry: UmbExtensionRegistry) => {
this.umbExtensionRegistry = umbExtensionRegistry;
this._registerViews();
});
}
private _registerViews() {
this.umbExtensionRegistry?.register({
alias: 'Umb.Editor.Packages.Overview',
name: 'Packages',
type: 'editorView',
elementName: 'umb-packages-overview',
loader: () => import('./packages-overview.element'),
meta: {
icon: 'document',
pathname: 'repo',
editors: ['Umb.Editor.Packages'],
weight: 10,
},
});
this.umbExtensionRegistry?.register({
alias: 'Umb.Editor.Packages.Installed',
name: 'Installed',
type: 'editorView',
elementName: 'umb-packages-installed',
loader: () => import('./packages-installed.element'),
meta: {
icon: 'document',
pathname: 'installed',
editors: ['Umb.Editor.Packages'],
weight: 0,
},
});
}
render() {
return html`
<uui-icon-registry-essential>
<umb-section-layout>
<umb-section-main>
<umb-editor-entity alias="Umb.Editor.Packages">
<h1 slot="name">Packages</h1>
</umb-editor-entity>
</umb-section-main>
</umb-section-layout>
</uui-icon-registry-essential>
`;
}
}
export default UmbPackagesEditor;
declare global {
interface HTMLElementTagNameMap {
'umb-packages-editor': UmbPackagesEditor;
}
}

2
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-installed-item.element.ts
View File

@@ -83,7 +83,7 @@ export class UmbPackagesInstalledItem extends UmbContextConsumerMixin(LitElement
}
private _onClick() {
window.history.pushState({}, '', `/section/packages/view/repo/${this.package.id}`);
window.history.pushState({}, '', `/section/packages/details/${this.package.id}`);
}
}

66
src/Umbraco.Web.UI.Client/src/backoffice/sections/packages/packages-section.element.ts
View File

@@ -2,6 +2,7 @@ import '../../../backoffice/editors/shared/editor-entity/editor-entity.element';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { IRoute, IRoutingInfo } from 'router-slot';
import { UmbContextConsumerMixin } from '../../../core/context';
import { UmbExtensionRegistry } from '../../../core/extension';
@@ -10,57 +11,26 @@ import { UmbExtensionRegistry } from '../../../core/extension';
export class UmbPackagesSection extends UmbContextConsumerMixin(LitElement) {
private umbExtensionRegistry?: UmbExtensionRegistry;
constructor() {
super();
this.consumeContext('umbExtensionRegistry', (umbExtensionRegistry: UmbExtensionRegistry) => {
this.umbExtensionRegistry = umbExtensionRegistry;
this._registerViews();
});
}
private _registerViews() {
this.umbExtensionRegistry?.register({
alias: 'Umb.Editor.Packages.Overview',
name: 'Packages',
type: 'editorView',
elementName: 'umb-packages-overview',
loader: () => import('./packages-overview.element'),
meta: {
icon: 'document',
pathname: 'repo',
editors: ['Umb.Editor.Packages'],
weight: 10,
private _routes: IRoute[] = [
{
path: 'details/:id',
component: () => import('./packages-details.element'),
setup(component: any, info: IRoutingInfo) {
component.id = info.match.params.id;
},
});
this.umbExtensionRegistry?.register({
alias: 'Umb.Editor.Packages.Installed',
name: 'Installed',
type: 'editorView',
elementName: 'umb-packages-installed',
loader: () => import('./packages-installed.element'),
meta: {
icon: 'document',
pathname: 'installed',
editors: ['Umb.Editor.Packages'],
weight: 0,
},
});
}
},
{
path: '',
component: () => import('./packages-editor.element'),
},
{
path: '**',
redirectTo: '',
},
];
render() {
return html`
<uui-icon-registry-essential>
<umb-section-layout>
<umb-section-main>
<umb-editor-entity alias="Umb.Editor.Packages">
<h1 slot="name">Packages</h1>
</umb-editor-entity>
</umb-section-main>
</umb-section-layout>
</uui-icon-registry-essential>
`;
return html` <router-slot .routes=${this._routes}></router-slot> `;
}
}