From 8d34878b892fac26e89fd6d30d079fee5f89e387 Mon Sep 17 00:00:00 2001 From: Jacob Overgaard <752371+iOvergaard@users.noreply.github.com> Date: Thu, 23 Feb 2023 16:53:10 +0100 Subject: [PATCH] update installed packages view --- ...led-packages-section-view-item.element.ts} | 6 +- ...installed-packages-section-view.element.ts | 76 ++++++++----------- .../packages-installed-overview.element.ts | 59 -------------- 3 files changed, 36 insertions(+), 105 deletions(-) rename src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/{packages-installed-item.element.ts => installed-packages-section-view-item.element.ts} (90%) delete mode 100644 src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-overview.element.ts diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-item.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts similarity index 90% rename from src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-item.element.ts rename to src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts index 3c36e90087..23025cb334 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-item.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view-item.element.ts @@ -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; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts index d9eced75e2..256760912e 100644 --- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts +++ b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/installed-packages-section-view.element.ts @@ -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 = []; +@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, 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``; + return html` + + ${repeat( + this._installedPackages, + (item) => item.name, + (item) => + html`` + )} + + `; } } -export default UmbInstalledPackagesSectionViewElement; +export default UmbInstalledPackagesSectionView; declare global { interface HTMLElementTagNameMap { - 'umb-section-view-packages-installed': UmbInstalledPackagesSectionViewElement; + 'umb-installed-packages-section-view': UmbInstalledPackagesSectionView; } } diff --git a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-overview.element.ts b/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-overview.element.ts deleted file mode 100644 index eaee3d37bd..0000000000 --- a/src/Umbraco.Web.UI.Client/src/backoffice/packages/package-section/views/installed/packages-installed-overview.element.ts +++ /dev/null @@ -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` - ${this._errorMessage ? html`${this._errorMessage}` : nothing} - - ${repeat( - this._installedPackages, - (item) => item.id, - (item) => html`` - )} - - `; - } -} - -export default UmbPackagesInstalledOverviewElement; - -declare global { - interface HTMLElementTagNameMap { - 'umb-packages-installed': UmbPackagesInstalledOverviewElement; - } -}