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

set up default picker search result item kind

Browse Source
This commit is contained in:
Mads Rasmussen
2024-08-16 10:10:11 +02:00
parent ca12bf59cf
commit e650dcc4cb
9 changed files with 138 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/Umbraco.Web.UI.Client/src/packages/core/manifests.ts
View File

@@ -10,6 +10,7 @@ import { manifests as extensionManifests } from './extension-registry/manifests.
import { manifests as iconRegistryManifests } from './icon-registry/manifests.js';
import { manifests as localizationManifests } from './localization/manifests.js';
import { manifests as modalManifests } from './modal/common/manifests.js';
import { manifests as pickerModalManifests } from './picker-modal/manifests.js';
import { manifests as propertyActionManifests } from './property-action/manifests.js';
import { manifests as propertyTypeManifests } from './property-type/manifests.js';
import { manifests as recycleBinManifests } from './recycle-bin/manifests.js';
@@ -24,24 +25,25 @@ import type { ManifestTypes, UmbBackofficeManifestKind } from './extension-regis
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
...authManifests,
...extensionManifests,
...iconRegistryManifests,
...cultureManifests,
...localizationManifests,
...themeManifests,
...sectionManifests,
...treeManifests,
...collectionManifests,
...workspaceManifests,
...contentManifests,
...contentTypeManifests,
...propertyTypeManifests,
...settingsManifests,
...modalManifests,
...cultureManifests,
...debugManifests,
...entityActionManifests,
...entityBulkActionManifests,
...extensionManifests,
...iconRegistryManifests,
...localizationManifests,
...modalManifests,
...pickerModalManifests,
...propertyActionManifests,
...serverFileSystemManifests,
...debugManifests,
...propertyTypeManifests,
...recycleBinManifests,
...sectionManifests,
...serverFileSystemManifests,
...settingsManifests,
...themeManifests,
...treeManifests,
...workspaceManifests,
];

4
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/manifests.ts Normal file
View File

@@ -0,0 +1,4 @@
import { manifests as searchManifests } from './search/manifests.js';
import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [...searchManifests];

4
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/manifests.ts Normal file
View File

@@ -0,0 +1,4 @@
import { manifests as resultItemManifests } from './result-item/manifests.js';
import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [...resultItemManifests];

6
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.token.ts Normal file
View File

@@ -0,0 +1,6 @@
import type { UmbDefaultPickerSearchResultItemContext } from './default-picker-search-result-item.context.js';
import { UmbContextToken } from '@umbraco-cms/backoffice/context-api';
export const UMB_PICKER_SEARCH_RESULT_ITEM_CONTEXT = new UmbContextToken<UmbDefaultPickerSearchResultItemContext>(
'UmbPickerSearchResultItemContext',
);

10
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.context.ts Normal file
View File

@@ -0,0 +1,10 @@
import { UmbContextBase } from '@umbraco-cms/backoffice/class-api';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
export class UmbDefaultPickerSearchResultItemContext extends UmbContextBase<UmbDefaultPickerSearchResultItemContext> {
constructor(host: UmbControllerHost) {
super(host, 'pickerSearchResultItem');
}
}
export { UmbDefaultPickerSearchResultItemContext as api };

79
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/default-picker-search-result-item.element.ts Normal file
View File

@@ -0,0 +1,79 @@
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
import { customElement, html, nothing, property, state } from '@umbraco-cms/backoffice/external/lit';
import { UmbTextStyles } from '@umbraco-cms/backoffice/style';
import type { UmbPickerModalContext } from '@umbraco-cms/backoffice/picker-modal';
import { UMB_PICKER_MODAL_CONTEXT } from '@umbraco-cms/backoffice/picker-modal';
const elementName = 'umb-default-picker-search-result-item';
@customElement(elementName)
export class UmbDefaultPickerSearchResultItemElement extends UmbLitElement {
#item?: any | undefined;
@property({ type: Object })
public get item(): UmbDocumentItemModel | undefined {
return this.#item;
}
public set item(value: any | undefined) {
this.#item = value;
this.#observeIsSelected();
}
@state()
_isSelected = false;
#pickerModalContext?: UmbPickerModalContext;
constructor() {
super();
this.consumeContext(UMB_PICKER_MODAL_CONTEXT, (context) => {
this.#pickerModalContext = context;
this.#observeIsSelected();
});
}
#observeIsSelected() {
const selectionManager = this.#pickerModalContext?.selection;
if (!selectionManager) return;
const unique = this.item?.unique;
if (unique === undefined) return;
this.observe(selectionManager.selection, () => {
this._isSelected = selectionManager.isSelected(unique);
console.log(this._isSelected);
});
}
override render() {
const item = this.item;
if (!item) return nothing;
return html`
<uui-ref-node
name=${item.name}
id=${item.unique}
readonly
selectable
@selected=${() => this.#pickerModalContext?.selection.select(item.unique)}
@deselected=${() => this.#pickerModalContext?.selection.deselect(item.unique)}
?selected=${this._isSelected}>
${this.#renderIcon()}
</uui-ref-node>
`;
}
#renderIcon() {
if (!this.item?.documentType.icon) return nothing;
return html`<umb-icon slot="icon" name=${this.item.documentType.icon}></umb-icon>`;
}
static override styles = [UmbTextStyles];
}
export { UmbDocumentPickerSearchResultItemElement as element };
declare global {
interface HTMLElementTagNameMap {
[elementName]: UmbDocumentPickerSearchResultItemElement;
}
}

15
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/default/manifests.ts Normal file
View File

@@ -0,0 +1,15 @@
import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
{
type: 'kind',
alias: 'Umb.Kind.PickerSearchResultItem.Default',
matchKind: 'default',
matchType: 'pickerSearchResultItem',
manifest: {
type: 'pickerSearchResultItem',
api: () => import('./default-picker-search-result-item.context.js'),
element: () => import('./default-picker-search-result-item.element.js'),
},
},
];

4
src/Umbraco.Web.UI.Client/src/packages/core/picker-modal/search/result-item/manifests.ts Normal file
View File

@@ -0,0 +1,4 @@
import { manifests as defaultManifests } from './default/manifests.js';
import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/backoffice/extension-registry';
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [...defaultManifests];

3
src/Umbraco.Web.UI.Client/src/packages/documents/documents/picker/manifests.ts
View File

@@ -4,10 +4,9 @@ import type { ManifestTypes, UmbBackofficeManifestKind } from '@umbraco-cms/back
export const manifests: Array<ManifestTypes | UmbBackofficeManifestKind> = [
{
type: 'pickerSearchResultItem',
kind: 'default',
alias: 'Umb.PickerSearchResultItem.Document',
name: 'Document Picker Search Result Item',
element: () => import('./document-picker-search-result-item.element.js'),
api: () => import('./document-picker-search-result-item.context.js'),
forEntityTypes: [UMB_DOCUMENT_ENTITY_TYPE],
},
];