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

load collection layouts from extension registry

Browse Source
This commit is contained in:
Jesper Møller Jensen
2022-12-19 16:40:14 +01:00
parent c94b6dd370
commit 3c70ad26d1
3 changed files with 64 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/Umbraco.Web.UI.Client/src/backoffice/components/collection/collection-toolbar.element.ts
View File

@@ -1,11 +1,14 @@
import { UUITextStyles } from '@umbraco-ui/uui-css';
import { css, html, LitElement, nothing } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';
import '../tooltip-menu.element';
import { map } from 'rxjs';
import { TooltipMenuItem } from '../tooltip-menu.element';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import type { ManifestCollectionLayout } from '@umbraco-cms/models';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
@customElement('umb-collection-toolbar')
export class UmbCollectionToolbarElement extends LitElement {
export class UmbCollectionToolbarElement extends UmbObserverMixin(LitElement) {
static styles = [
UUITextStyles,
css`
@@ -27,31 +30,6 @@ export class UmbCollectionToolbarElement extends LitElement {
`,
];
@property()
public viewTypes: Array<TooltipMenuItem> = [
{
label: 'List',
icon: 'umb:list',
action: () => {
this._currentViewType = this.viewTypes[0];
},
},
{
label: 'Grid',
icon: 'umb:grid',
action: () => {
console.log('aweawd');
this._currentViewType = this.viewTypes[1];
},
},
{
label: 'something else',
icon: 'umb:folder',
action: () => {
this._currentViewType = this.viewTypes[2];
},
},
];
@property()
public actions: Array<TooltipMenuItem> = [
{
@@ -70,11 +48,15 @@ export class UmbCollectionToolbarElement extends LitElement {
},
];
@state()
private _collectionLayouts: Array<ManifestCollectionLayout> = [];
@property()
public useSearch = true;
@state()
private _currentViewType = this.viewTypes[0];
private _currentViewType?: ManifestCollectionLayout;
@state()
private _search = '';
@state()
@@ -82,9 +64,41 @@ export class UmbCollectionToolbarElement extends LitElement {
@state()
private _viewTypesOpen = false;
constructor() {
super();
this._observeCollectionLayouts();
}
private _observeCollectionLayouts() {
this.observe<Array<ManifestCollectionLayout>>(
umbExtensionsRegistry?.extensionsOfType('collectionLayout').pipe(
map((extensions) => {
//TODO: This is working, so why can ts not find the type?
return extensions.filter((extension) => extension.meta.entityType === 'media');
})
),
(layouts) => {
console.log('layouts', layouts);
if (layouts?.length === 0) return;
this._collectionLayouts = layouts;
if (!this._currentViewType) {
this._currentViewType = layouts[0];
}
}
);
}
private _changeLayout(path: string) {
history.pushState(null, '', 'section/media/dashboard/media-management/' + path);
}
private _toggleViewType() {
const index = this.viewTypes.indexOf(this._currentViewType);
this._currentViewType = this.viewTypes[(index + 1) % this.viewTypes.length];
if (!this._currentViewType) return;
const index = this._collectionLayouts.indexOf(this._currentViewType);
this._currentViewType = this._collectionLayouts[(index + 1) % this._collectionLayouts.length];
this._changeLayout(this._currentViewType.meta.pathName);
}
private _updateSearch(e: InputEvent) {
@@ -116,19 +130,28 @@ export class UmbCollectionToolbarElement extends LitElement {
}
private _renderViewTypeButton() {
if (this.viewTypes.length < 2 || !this._currentViewType.icon) return nothing;
if (!this._currentViewType) return;
if (this.viewTypes.length === 2) {
if (this._collectionLayouts.length < 2 || !this._currentViewType.meta.icon) return nothing;
if (this._collectionLayouts.length === 2) {
return html`<uui-button @click=${this._toggleViewType} look="outline" compact>
<uui-icon .name=${this._currentViewType.icon}></uui-icon>
<uui-icon .name=${this._currentViewType.meta.icon}></uui-icon>
</uui-button>`;
}
if (this.viewTypes.length > 2) {
if (this._collectionLayouts.length > 2) {
return html`<uui-popover margin="8" .open=${this._viewTypesOpen} @close=${() => (this._viewTypesOpen = false)}>
<uui-button @click=${() => (this._viewTypesOpen = !this._viewTypesOpen)} slot="trigger" look="outline" compact>
<uui-icon .name=${this._currentViewType.icon}></uui-icon>
<uui-icon .name=${this._currentViewType.meta.icon}></uui-icon>
</uui-button>
<umb-tooltip-menu icon slot="popover" .items=${this.viewTypes}></umb-tooltip-menu>
<umb-tooltip-menu
icon
slot="popover"
.items=${this._collectionLayouts.map((layout) => ({
label: layout.meta.label,
icon: layout.meta.icon,
action: () => console.log('change layout'),
}))}></umb-tooltip-menu>
</uui-popover>`;
}

1
src/Umbraco.Web.UI.Client/src/backoffice/components/collection/layouts/collection-layout-grid.element.ts
View File

@@ -92,7 +92,6 @@ export class UmbCollectionLayoutGridElement extends UmbContextConsumerMixin(UmbO
this.observe<Array<MediaDetails>>(this._mediaStore?.items, (items) => {
this._mediaItems = items;
console.log('items', items);
});
}

8
src/Umbraco.Web.UI.Client/src/backoffice/dashboards/media-management/dashboard-media-management.element.ts
View File

@@ -7,13 +7,15 @@ import '../../components/collection/collection-view.element';
import { map } from 'rxjs';
import { IRoutingInfo } from 'router-slot';
import type { ManifestCollectionLayout } from '@umbraco-cms/models';
import { UmbContextConsumerMixin } from '@umbraco-cms/context-api';
import { UmbContextConsumerMixin, UmbContextProviderMixin } from '@umbraco-cms/context-api';
import { UmbObserverMixin } from '@umbraco-cms/observable-api';
import { umbExtensionsRegistry } from '@umbraco-cms/extensions-registry';
import { createExtensionElement } from '@umbraco-cms/extensions-api';
@customElement('umb-dashboard-media-management')
export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(UmbObserverMixin(LitElement)) {
export class UmbDashboardMediaManagementElement extends UmbContextProviderMixin(
UmbContextConsumerMixin(UmbObserverMixin(LitElement))
) {
static styles = [
UUITextStyles,
css`
@@ -39,6 +41,7 @@ export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(
constructor() {
super();
this.provideContext('umbMediaContext', this);
this._observeCollectionLayouts();
}
@@ -51,7 +54,6 @@ export class UmbDashboardMediaManagementElement extends UmbContextConsumerMixin(
})
),
(layouts) => {
console.log('layouts', layouts);
if (layouts?.length === 0) return;
this._collectionLayouts = layouts;
this._createRoutes();