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

Merge pull request #1472 from umbraco/feature/datatypepickerflow-property-icons

Browse Source 
Feature: Datatypepickerflow - Property Icons
This commit is contained in:
Niels Lyngsø
2024-03-25 08:15:39 +01:00
committed by GitHub
parent ead68c7507 f80c6ca312
commit 8114dfba9d
8 changed files with 78 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/Umbraco.Web.UI.Client/src/packages/data-type/collection/repository/data-type-collection.server.data-source.ts
View File

@@ -5,6 +5,7 @@ import { DataTypeResource } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbCollectionDataSource } from '@umbraco-cms/backoffice/collection';
import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
/**
* A data source that fetches the data-type collection data from the server.
@@ -14,6 +15,7 @@ import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
*/
export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataSource<UmbDataTypeItemModel> {
#host: UmbControllerHost;
#manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
/**
* Creates an instance of UmbDataTypeCollectionServerDataSource.
@@ -22,6 +24,12 @@ export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataS
*/
constructor(host: UmbControllerHost) {
this.#host = host;
umbExtensionsRegistry
.byType('propertyEditorUi')
.subscribe((manifestPropertyEditorUIs) => {
this.#manifestPropertyEditorUis = manifestPropertyEditorUIs;
})
.unsubscribe();
}
/**
@@ -48,6 +56,7 @@ export class UmbDataTypeCollectionServerDataSource implements UmbCollectionDataS
unique: item.id,
name: item.name,
propertyEditorUiAlias: item.editorUiAlias!,
icon: this.#manifestPropertyEditorUis.find((ui) => ui.alias === item.editorUiAlias!)?.meta.icon,
};
return dataTypeDetail;

2
src/Umbraco.Web.UI.Client/src/packages/data-type/components/data-type-flow-input/data-type-flow-input.element.ts
View File

@@ -78,8 +78,6 @@ export class UmbInputDataTypeElement extends FormControlMixin(UmbLitElement) {
this.#editDataTypeModal?.open({}, 'edit/' + this._ids![0]);
}}
standalone>
<!-- TODO: Get the icon from property editor UI -->
<uui-icon name="${'document'}" slot="icon"></uui-icon>
<uui-action-bar slot="actions">
<uui-button label="Change" .href=${this._createRoute}></uui-button>
</uui-action-bar>

43
src/Umbraco.Web.UI.Client/src/packages/data-type/components/ref-data-type/ref-data-type.element.ts
View File

@@ -1,7 +1,8 @@
import { UmbDataTypeDetailRepository } from '../../repository/detail/data-type-detail.repository.js';
import { UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
import { UUIIconRequestEvent, UUIRefNodeElement } from '@umbraco-cms/backoffice/external/uui';
import { html, customElement, property, state, css } from '@umbraco-cms/backoffice/external/lit';
import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
import { umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
/**
* @element umb-ref-data-type
@@ -10,8 +11,10 @@ import { UmbElementMixin } from '@umbraco-cms/backoffice/element-api';
*/
@customElement('umb-ref-data-type')
export class UmbRefDataTypeElement extends UmbElementMixin(UUIRefNodeElement) {
@state()
protected fallbackIcon =
'<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M142.212 397.267l106.052-48.024L398.479 199.03l-26.405-26.442-90.519 90.517-15.843-15.891 90.484-90.486-16.204-16.217-150.246 150.243-47.534 106.513zm74.904-100.739l23.285-23.283 3.353 22.221 22.008 3.124-23.283 23.313-46.176 20.991 20.813-46.366zm257.6-173.71L416.188 64.3l-49.755 49.785 58.504 58.503 49.779-49.77zM357.357 300.227h82.826v116.445H68.929V300.227h88.719v-30.648H38.288v177.733h432.537V269.578H357.357v30.649z"></path></svg>';
`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor"><path d="M255.981 440.734c-4.422 0-8.895-.159-13.293-.471l1.682-23.62c15.395 1.095 31.076-.014 46.053-3.277l5.039 23.137a185.943 185.943 0 0 1-39.481 4.231zm-43.253-5.094a183.61 183.61 0 0 1-49.174-19.657l11.864-20.49a159.927 159.927 0 0 0 42.833 17.123l-5.523 23.024zm111.734-8.02l-8.781-21.991a160.553 160.553 0 0 0 39.949-23.097l14.666 18.593a184.376 184.376 0 0 1-45.834 26.495zm-185.815-28.926a185.575 185.575 0 0 1-35.652-39.114l19.596-13.293a161.956 161.956 0 0 0 31.105 34.125l-15.049 18.282zm253.834-18.216l-17.492-15.96a161.321 161.321 0 0 0 25.924-38.192l21.297 10.353a184.986 184.986 0 0 1-29.729 43.799zM88.097 333.183a183.381 183.381 0 0 1-14.977-50.791l23.438-3.355a159.869 159.869 0 0 0 13.047 44.243l-21.508 9.903zm345.082-24.798l-22.711-6.705c4.355-14.761 6.566-30.131 6.566-45.679h23.678c0 17.818-2.533 35.444-7.533 52.384zM94.96 252.634l-23.672-.483c.365-17.809 3.266-35.378 8.625-52.224l22.566 7.181c-4.671 14.677-7.203 29.996-7.519 45.526zm320.881-16.346a159.854 159.854 0 0 0-12.115-44.503l21.713-9.45a183.696 183.696 0 0 1 13.908 51.088l-23.506 2.865zM112.546 182.67l-21.072-10.798a184.915 184.915 0 0 1 30.633-43.168l17.154 16.319a161.599 161.599 0 0 0-26.715 37.647zm278.68-14.155a161.801 161.801 0 0 0-30.389-34.763l15.426-17.966a185.512 185.512 0 0 1 34.832 39.846l-19.869 12.883zm-232.239-41.101l-14.273-18.894a184.318 184.318 0 0 1 46.375-25.533l8.322 22.169a160.705 160.705 0 0 0-40.424 22.258zm180.444-9.19a160.053 160.053 0 0 0-42.466-18.02l6.009-22.903a183.633 183.633 0 0 1 48.748 20.684l-12.291 20.239zM224.825 97.956l-4.553-23.239a186.147 186.147 0 0 1 35.705-3.45h.004c5.711 0 11.473.266 17.129.786l-2.174 23.58c-15.306-1.414-31.072-.624-46.111 2.323z"/></svg>`;
//icon-circle-dotted.svg
@property({ type: String, attribute: 'data-type-id' })
public get dataTypeId(): string | undefined {
@@ -28,8 +31,11 @@ export class UmbRefDataTypeElement extends UmbElementMixin(UUIRefNodeElement) {
(dataType) => {
if (dataType) {
this.name = dataType.name ?? '';
this.propertyEditorUiAlias = dataType.editorUiAlias ?? '';
this.propertyEditorSchemaAlias = dataType.editorAlias ?? '';
if (dataType.editorUiAlias ?? '' !== this.propertyEditorUiAlias) {
this.propertyEditorUiAlias = dataType.editorUiAlias ?? '';
this.#getIconFromUiAlias();
}
}
},
'dataType',
@@ -53,6 +59,37 @@ export class UmbRefDataTypeElement extends UmbElementMixin(UUIRefNodeElement) {
@state()
propertyEditorSchemaAlias = '';
async #getIconFromUiAlias() {
if (!this.propertyEditorUiAlias) return;
this.observe(
umbExtensionsRegistry.byTypeAndAlias('propertyEditorUi', this.propertyEditorUiAlias),
async (manifestPropertyEditorUi) => {
const icon = manifestPropertyEditorUi?.meta.icon;
/** [LI] We have the icon name now, but because this element extends from uui-ref-node, it wants the icon via the icon slot.
* From what I can see, this is not possible via this file, but this is the file that have the datatype data....
* Instead, overwriting the fallbackIcon property which requires a SVG... */
if (icon) {
this.#requestIconSVG(icon);
}
},
),
'_observeIcon';
}
#requestIconSVG(iconName: string) {
if (iconName !== '' && iconName !== null) {
const event = new UUIIconRequestEvent(UUIIconRequestEvent.ICON_REQUEST, {
detail: { iconName: iconName },
});
this.dispatchEvent(event);
if (event.icon !== null) {
event.icon.then((iconSvg: string) => {
this.fallbackIcon = iconSvg;
});
}
}
}
protected renderDetail() {
const details: string[] = [];

2
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-data-type-picker-modal.element.ts
View File

@@ -86,7 +86,7 @@ export class UmbDataTypePickerFlowDataTypePickerModalElement extends UmbModalBas
? html` <li class="item">
<uui-button label="dataType.name" type="button" @click="${() => this._handleClick(dataType)}">
<div class="item-content">
<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
<umb-icon name=${dataType.icon ?? 'icon-circle-dotted'} class="icon"></umb-icon>
${dataType.name}
</div>
</uui-button>

5
src/Umbraco.Web.UI.Client/src/packages/data-type/modals/data-type-picker-flow/data-type-picker-flow-modal.element.ts
View File

@@ -1,4 +1,3 @@
import { UmbDataTypeTreeRepository } from '../../tree/data-type-tree.repository.js';
import { UMB_DATATYPE_WORKSPACE_MODAL } from '../../workspace/data-type-workspace.modal-token.js';
import { UMB_DATA_TYPE_ENTITY_TYPE } from '../../entity.js';
import { UmbDataTypeCollectionRepository } from '../../collection/index.js';
@@ -275,10 +274,10 @@ export class UmbDataTypePickerFlowModalElement extends UmbModalBaseElement<
dataTypes,
(dataType) => dataType.unique,
(dataType) =>
html`<li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
html` <li class="item" ?selected=${this.value.selection.includes(dataType.unique)}>
<uui-button .label=${dataType.name} type="button" @click="${() => this._handleDataTypeClick(dataType)}">
<div class="item-content">
<uui-icon name="${'icon-bug'}" class="icon"></uui-icon>
<umb-icon name=${dataType.icon ?? 'icon-circle-dotted'} class="icon"></umb-icon>
${dataType.name}
</div>
</uui-button>

12
src/Umbraco.Web.UI.Client/src/packages/data-type/repository/item/data-type-item.server.data-source.ts
View File

@@ -3,6 +3,9 @@ import { UmbItemServerDataSourceBase } from '@umbraco-cms/backoffice/repository'
import type { DataTypeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import { DataTypeResource } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
let manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
/**
* A server data source for Data Type items
@@ -19,11 +22,19 @@ export class UmbDataTypeItemServerDataSource extends UmbItemServerDataSourceBase
* @param {UmbControllerHost} host
* @memberof UmbDataTypeItemServerDataSource
*/
constructor(host: UmbControllerHost) {
super(host, {
getItems,
mapper,
});
umbExtensionsRegistry
.byType('propertyEditorUi')
.subscribe((manifestPropertyEditorUIs) => {
manifestPropertyEditorUis = manifestPropertyEditorUIs;
})
.unsubscribe();
}
}
@@ -35,5 +46,6 @@ const mapper = (item: DataTypeItemResponseModel): UmbDataTypeItemModel => {
unique: item.id,
name: item.name,
propertyEditorUiAlias: item.editorUiAlias || '', // TODO: why can this be undefined or null on the server?
icon: manifestPropertyEditorUis.find((ui) => ui.alias === item.editorUiAlias)?.meta.icon,
};
};

1
src/Umbraco.Web.UI.Client/src/packages/data-type/repository/item/types.ts
View File

@@ -2,4 +2,5 @@ export interface UmbDataTypeItemModel {
unique: string;
name: string;
propertyEditorUiAlias: string;
icon?: string;
}

15
src/Umbraco.Web.UI.Client/src/packages/data-type/tree/data-type-tree.server.data-source.ts
View File

@@ -4,6 +4,9 @@ import { UmbTreeServerDataSourceBase } from '@umbraco-cms/backoffice/tree';
import type { DataTypeTreeItemResponseModel } from '@umbraco-cms/backoffice/external/backend-api';
import { DataTypeResource } from '@umbraco-cms/backoffice/external/backend-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
import { type ManifestPropertyEditorUi, umbExtensionsRegistry } from '@umbraco-cms/backoffice/extension-registry';
let manifestPropertyEditorUis: Array<ManifestPropertyEditorUi> = [];
/**
* A data source for a data type tree that fetches data from the server
@@ -26,12 +29,19 @@ export class UmbDataTypeTreeServerDataSource extends UmbTreeServerDataSourceBase
getChildrenOf,
mapper,
});
umbExtensionsRegistry
.byType('propertyEditorUi')
.subscribe((manifestPropertyEditorUIs) => {
manifestPropertyEditorUis = manifestPropertyEditorUIs;
})
.unsubscribe();
}
}
const getRootItems = (args: UmbTreeRootItemsRequestArgs) =>
const getRootItems = async (args: UmbTreeRootItemsRequestArgs) => {
// eslint-disable-next-line local-rules/no-direct-api-import
DataTypeResource.getTreeDataTypeRoot({ skip: args.skip, take: args.take });
return DataTypeResource.getTreeDataTypeRoot({ skip: args.skip, take: args.take });
};
const getChildrenOf = (args: UmbTreeChildrenOfRequestArgs) => {
if (args.parentUnique === null) {
@@ -48,6 +58,7 @@ const mapper = (item: DataTypeTreeItemResponseModel): UmbDataTypeTreeItemModel =
return {
unique: item.id,
parentUnique: item.parent?.id || null,
icon: manifestPropertyEditorUis.find((ui) => ui.alias === item.editorUiAlias)?.meta.icon,
name: item.name,
entityType: item.isFolder ? 'data-type-folder' : 'data-type',
isFolder: item.isFolder,