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

Package Builder: PartialView Picker

Browse Source
This commit is contained in:
leekelleher
2024-04-04 11:31:16 +01:00
parent 47c02e8450
commit 84006bb722
3 changed files with 41 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/Umbraco.Web.UI.Client/src/packages/packages/package-builder/workspace/workspace-package-builder.element.ts
View File

@@ -1,6 +1,7 @@
import { UmbDictionaryPickerContext } from '../../../dictionary/components/input-dictionary/input-dictionary.context.js';
import { UmbMediaPickerContext } from '../../../media/media/components/input-media/input-media.context.js';
import { UmbPackageRepository } from '../../package/repository/index.js';
import { UmbPartialViewPickerContext } from '../../../templating/partial-views/components/input-partial-view/input-partial-view.context.js';
import { UmbScriptPickerContext } from '../../../templating/scripts/components/input-script/input-script.context.js';
import { UmbStylesheetPickerContext } from '../../../templating/stylesheets/components/stylesheet-input/stylesheet-input.context.js';
import { UmbTemplatePickerContext } from '../../../templating/templates/components/input-template/input-template.context.js';
@@ -189,10 +190,7 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
${this.#renderTemplateSection()}
${this.#renderStylesheetsSection()}
${this.#renderScriptsSection()}
<umb-property-layout label="Partial Views" description="">
${this.#renderPartialViewSection()}
</umb-property-layout>
</uui-box>
`;
}
@@ -417,10 +415,30 @@ export class UmbWorkspacePackageBuilderElement extends UmbLitElement {
`;
}
#onPartialViewsChange(event: { target: UmbInputEntityElement }) {
if (!this._package) return;
this._package.partialViews =
event.target.selection?.map((path) => this.#serverFilePathUniqueSerializer.toServerPath(path) as string) ?? [];
this.requestUpdate('_package');
}
#renderPartialViewSection() {
return html`<div slot="editor">
<umb-input-checkbox-list></umb-input-checkbox-list>
</div>`;
if (!this._package) return nothing;
return html`
<umb-property-layout label="Partial Views">
<div slot="editor">
<umb-input-entity
.getIcon=${() => 'icon-notepad'}
.pickerContext=${UmbPartialViewPickerContext}
.selection=${this._package.partialViews.map((path) =>
this.#serverFilePathUniqueSerializer.toUnique(path),
) ?? []}
@change=${this.#onPartialViewsChange}>
</umb-input-entity>
</div>
</umb-property-layout>
`;
}
static styles = [

8
src/Umbraco.Web.UI.Client/src/packages/templating/modals/partial-view-picker/partial-view-picker-modal.token.ts
View File

@@ -1,8 +1,9 @@
import { UMB_PARTIAL_VIEW_TREE_ALIAS } from '../../partial-views/tree/manifests.js';
import { UmbModalToken, type UmbPickerModalValue, type UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
import type { UmbUniqueTreeItemModel } from '@umbraco-cms/backoffice/tree';
import type { UmbPartialViewTreeItemModel } from '../../partial-views/tree/index.js';
import { UmbModalToken } from '@umbraco-cms/backoffice/modal';
import type { UmbPickerModalValue, UmbTreePickerModalData } from '@umbraco-cms/backoffice/modal';
export type UmbPartialViewPickerModalData = UmbTreePickerModalData<UmbUniqueTreeItemModel>;
export type UmbPartialViewPickerModalData = UmbTreePickerModalData<UmbPartialViewTreeItemModel>;
export type UmbPartialViewPickerModalValue = UmbPickerModalValue;
export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken<
@@ -13,6 +14,5 @@ export const UMB_PARTIAL_VIEW_PICKER_MODAL = new UmbModalToken<
type: 'sidebar',
size: 'small',
},
data: { treeAlias: UMB_PARTIAL_VIEW_TREE_ALIAS, hideTreeRoot: true },
});

13
src/Umbraco.Web.UI.Client/src/packages/templating/partial-views/components/input-partial-view/input-partial-view.context.ts Normal file
View File

@@ -0,0 +1,13 @@
import { UMB_PARTIAL_VIEW_ITEM_REPOSITORY_ALIAS } from '../../repository/item/index.js';
import { UMB_PARTIAL_VIEW_PICKER_MODAL } from '../../../modals/partial-view-picker/partial-view-picker-modal.token.js';
import type { UmbPartialViewItemModel } from '../../types.js';
import { UmbPickerInputContext } from '@umbraco-cms/backoffice/picker-input';
import type { UmbControllerHost } from '@umbraco-cms/backoffice/controller-api';
export class UmbPartialViewPickerContext extends UmbPickerInputContext<UmbPartialViewItemModel> {
constructor(host: UmbControllerHost) {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
super(host, UMB_PARTIAL_VIEW_ITEM_REPOSITORY_ALIAS, UMB_PARTIAL_VIEW_PICKER_MODAL);
}
}