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

update installed packages view

Browse Source
This commit is contained in:
Jacob Overgaard
2023-02-23 16:53:10 +01:00
parent 5c95b75b0c
commit 8d34878b89
3 changed files with 36 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-item.element.ts → src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts
View File

@@ -9,8 +9,8 @@ import { createExtensionElement, umbExtensionsRegistry } from '@umbraco-cms/exte
import type { ManifestPackageView, UmbPackage } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-packages-installed-item')
export class UmbPackagesInstalledItem extends UmbLitElement {
@customElement('umb-installed-packages-section-view-item')
export class UmbInstalledPackagesSectionViewItemElement extends UmbLitElement {
@property({ type: Object })
package!: UmbPackage;
@@ -87,6 +87,6 @@ export class UmbPackagesInstalledItem extends UmbLitElement {
declare global {
interface HTMLElementTagNameMap {
'umb-packages-installed-item': UmbPackagesInstalledItem;
'umb-installed-packages-section-view-item': UmbInstalledPackagesSectionViewItemElement;
}
}

76
src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts
View File

@@ -1,67 +1,57 @@
import { html } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { IRoute, IRoutingInfo } from 'router-slot';
import type { ManifestWorkspace } from '@umbraco-cms/models';
import { createExtensionElement , umbExtensionsRegistry } from '@umbraco-cms/extensions-api';
import { repeat } from 'lit/directives/repeat.js';
import { UmbPackageRepository } from '../../../repository/package.repository';
import type { UmbPackage } from '@umbraco-cms/models';
import { UmbLitElement } from '@umbraco-cms/element';
@customElement('umb-installed-packages-section-view')
export class UmbInstalledPackagesSectionViewElement extends UmbLitElement {
@state()
private _routes: IRoute[] = [];
import './installed-packages-section-view-item.element';
private _workspaces: Array<ManifestWorkspace> = [];
@customElement('umb-installed-packages-section-view')
export class UmbInstalledPackagesSectionView extends UmbLitElement {
@state()
private _installedPackages: UmbPackage[] = [];
private repository: UmbPackageRepository;
constructor() {
super();
this.observe(umbExtensionsRegistry?.extensionsOfType('workspace'), (workspaceExtensions) => {
this._workspaces = workspaceExtensions;
this._createRoutes();
});
this.repository = new UmbPackageRepository(this);
}
private _createRoutes() {
const routes: any[] = [
{
path: 'overview',
component: () => import('./packages-installed-overview.element'),
},
];
firstUpdated() {
this._loadInstalledPackages();
}
// TODO: find a way to make this reuseable across:
this._workspaces?.map((workspace: ManifestWorkspace) => {
routes.push({
path: `${workspace.meta.entityType}/:key`,
component: () => createExtensionElement(workspace),
setup: (component: Promise<HTMLElement>, info: IRoutingInfo) => {
component.then((el: HTMLElement) => {
(el as any).entityKey = info.match.params.key;
});
},
});
routes.push({
path: workspace.meta.entityType,
component: () => createExtensionElement(workspace),
});
/**
* Fetch the installed packages from the server
*/
private async _loadInstalledPackages() {
const package$ = await this.repository.rootItems();
package$.subscribe((packages) => {
this._installedPackages = packages.filter((p) => !!p.name);
});
routes.push({
path: '**',
redirectTo: 'section/packages/view/installed/overview', //TODO: this should be dynamic
});
this._routes = routes;
}
render() {
return html`<umb-router-slot .routes=${this._routes}></umb-router-slot>`;
return html`<uui-box headline="Installed packages">
<uui-ref-list>
${repeat(
this._installedPackages,
(item) => item.name,
(item) =>
html`<umb-installed-packages-section-view-item .package=${item}></umb-installed-packages-section-view-item>`
)}
</uui-ref-list>
</uui-box>`;
}
}
export default UmbInstalledPackagesSectionViewElement;
export default UmbInstalledPackagesSectionView;
declare global {
interface HTMLElementTagNameMap {
'umb-section-view-packages-installed': UmbInstalledPackagesSectionViewElement;
'umb-installed-packages-section-view': UmbInstalledPackagesSectionView;
}
}

59
src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-overview.element.ts
View File

@@ -1,59 +0,0 @@
import { html, LitElement, nothing } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { repeat } from 'lit/directives/repeat.js';
import './packages-installed-item.element';
@customElement('umb-packages-installed-overview')
export class UmbPackagesInstalledOverviewElement extends LitElement {
@state()
private _installedPackages: any[] = []; // TODO: Use real type
@state()
private _errorMessage = '';
firstUpdated() {
this._loadInstalledPackages();
}
/**
* Fetch the installed packages from the server
*/
private async _loadInstalledPackages() {
this._errorMessage = '';
// TODO: Implement when API is ready
// try {
// const {
// data: { packages },
// } = await getPackagesInstalled({});
// this._installedPackages = packages;
// } catch (e) {
// if (e instanceof getPackagesInstalled.Error) {
// const error = e.getActualType();
// this._errorMessage = error.data.detail ?? 'An error occurred while loading the installed packages';
// }
// }
}
render() {
return html`<uui-box headline="Installed packages">
${this._errorMessage ? html`<uui-error-message>${this._errorMessage}</uui-error-message>` : nothing}
<uui-ref-list>
${repeat(
this._installedPackages,
(item) => item.id,
(item) => html`<umb-packages-installed-item .package=${item}></umb-packages-installed-item>`
)}
</uui-ref-list>
</uui-box>`;
}
}
export default UmbPackagesInstalledOverviewElement;
declare global {
interface HTMLElementTagNameMap {
'umb-packages-installed': UmbPackagesInstalledOverviewElement;
}
}