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

render and grouping

Browse Source
This commit is contained in:
Lone Iversen
2024-02-05 15:13:21 +01:00
parent 0c4599f878
commit 76825064f6
1 changed files with 25 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/Umbraco.Web.UI.Client/src/packages/block/block/modals/block-catalogue/block-catalogue-modal.element.ts
View File

@@ -1,8 +1,5 @@
import { UMB_BLOCK_WORKSPACE_MODAL } from '../../workspace/index.js';
import {
DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
type UmbDocumentTypeItemModel,
} from '@umbraco-cms/backoffice/document-type';
import { DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS } from '@umbraco-cms/backoffice/document-type';
import type {
UmbBlockCatalogueModalData,
UmbBlockCatalogueModalValue,
@@ -10,7 +7,6 @@ import type {
UmbBlockTypeWithGroupKey,
} from '@umbraco-cms/backoffice/block';
import { css, html, customElement, state, repeat, ifDefined, nothing } from '@umbraco-cms/backoffice/external/lit';
import { groupBy } from '@umbraco-cms/backoffice/external/lodash';
import {
UMB_MODAL_CONTEXT,
UmbModalBaseElement,
@@ -23,17 +19,14 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
UmbBlockCatalogueModalData,
UmbBlockCatalogueModalValue
> {
#itemManager = new UmbRepositoryItemsManager<UmbDocumentTypeItemModel>(
#itemManager = new UmbRepositoryItemsManager<UmbBlockTypeWithGroupKey>(
this,
DOCUMENT_TYPE_ITEM_REPOSITORY_ALIAS,
(x) => x.unique,
(x) => x.contentElementTypeKey,
);
@state()
private _blocks: Array<UmbBlockTypeWithGroupKey> = [];
@state()
private _blockGroups: Array<UmbBlockTypeGroup> = [];
private _groupedBlocks: Array<{ name?: string; blocks: Array<UmbBlockTypeWithGroupKey> }> = [];
@state()
_openClipboard?: boolean;
@@ -60,19 +53,6 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
this._workspacePath = routeBuilder({});
});
});
this.observe(this.#itemManager.items, (items) => {
this._blocks = items.map((item) => {
const blockGroup = this._blocks.find((block) => block.contentElementTypeKey === item.unique)?.groupKey;
const block: UmbBlockTypeWithGroupKey = {
contentElementTypeKey: item.unique,
label: item.name,
icon: item.icon ?? undefined,
groupKey: blockGroup,
};
return block;
});
});
}
connectedCallback() {
@@ -80,10 +60,17 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
if (!this.data) return;
this._openClipboard = this.data.openClipboard ?? false;
this._blocks = this.data.blocks ?? [];
this._blockGroups = this.data.blockGroups ?? [];
this.#itemManager.setUniques(this._blocks.map((x) => x.contentElementTypeKey));
const blocks: Array<UmbBlockTypeWithGroupKey> = this.data.blocks ?? [];
const blockGroups: Array<UmbBlockTypeGroup> = this.data.blockGroups ?? [];
const noGroupBlocks = blocks.filter((block) => !blockGroups.find((group) => group.key === block.groupKey));
const grouped = blockGroups.map((group) => ({
name: group.name ?? '',
blocks: blocks.filter((block) => block.groupKey === group.key),
}));
this._groupedBlocks = [{ blocks: noGroupBlocks }, ...grouped];
}
render() {
@@ -107,15 +94,8 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
}
#renderCreateEmpty() {
const blockArrays = groupBy(this._blocks, 'groupKey');
const mappedGroupsAndBlocks = Object.entries(blockArrays).map(([key, value]) => {
const group = this._blockGroups.find((group) => group.key === key);
return { name: group?.name, blocks: value };
});
return html`
${mappedGroupsAndBlocks.map(
${this._groupedBlocks.map(
(group) => html`
${group.name ? html`<h4>${group.name}</h4>` : nothing}
<div class="blockGroup">
@@ -141,12 +121,18 @@ export class UmbBlockCatalogueModalElement extends UmbModalBaseElement<
#renderViews() {
return html`
<uui-tab-group slot="navigation">
<uui-tab label="Create Empty" ?active=${!this._openClipboard} @click=${() => (this._openClipboard = false)}>
Create Empty
<uui-tab
label=${this.localize.term('blockEditor_tabCreateEmpty')}
?active=${!this._openClipboard}
@click=${() => (this._openClipboard = false)}>
<umb-localize key=${this.localize.term('blockEditor_tabCreateEmpty')}>Create Empty</umb-localize>
<uui-icon slot="icon" name="icon-add"></uui-icon>
</uui-tab>
<uui-tab label="Clipboard" ?active=${this._openClipboard} @click=${() => (this._openClipboard = true)}>
Clipboard
<uui-tab
label=${this.localize.term('blockEditor_tabClipboard')}
?active=${this._openClipboard}
@click=${() => (this._openClipboard = true)}>
<umb-localize key=${this.localize.term('blockEditor_tabClipboard')}>Clipboard</umb-localize>
<uui-icon slot="icon" name="icon-paste-in"></uui-icon>
</uui-tab>
</uui-tab-group>