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

use tree picker for document types

Browse Source
This commit is contained in:
Mads Rasmussen
2023-05-08 21:05:27 +02:00
parent 845d2ff3c9
commit 97fc1bfe61
6 changed files with 15 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/modals/manifests.ts
View File

@@ -1,6 +1,16 @@
import { DOCUMENT_TYPE_TREE_ALIAS } from '../tree/manifests';
import type { ManifestModal } from '@umbraco-cms/backoffice/extensions-registry';
const modals: Array<ManifestModal> = [
{
type: 'modal',
kind: 'treePicker',
alias: 'Umb.Modal.DocumentTypePicker',
name: 'Document Type Picker Modal',
meta: {
treeAlias: DOCUMENT_TYPE_TREE_ALIAS,
},
},
{
type: 'modal',
alias: 'Umb.Modal.AllowedDocumentTypes',

4
src/Umbraco.Web.UI.Client/src/backoffice/documents/document-types/tree/manifests.ts
View File

@@ -1,9 +1,11 @@
import { DOCUMENT_TYPE_REPOSITORY_ALIAS } from '../repository/manifests';
import type { ManifestTree, ManifestTreeItem } from '@umbraco-cms/backoffice/extensions-registry';
export const DOCUMENT_TYPE_TREE_ALIAS = 'Umb.Tree.DocumentTypes';
const tree: ManifestTree = {
type: 'tree',
alias: 'Umb.Tree.DocumentTypes',
alias: DOCUMENT_TYPE_TREE_ALIAS,
name: 'Document Types Tree',
meta: {
repositoryAlias: DOCUMENT_TYPE_REPOSITORY_ALIAS,

3
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/components/input-document-picker/input-document-picker.element.ts
View File

@@ -10,6 +10,7 @@ import {
UMB_MODAL_CONTEXT_TOKEN,
UMB_CONFIRM_MODAL,
UMB_DOCUMENT_PICKER_MODAL,
UMB_DOCUMENT_TYPE_PICKER_MODAL,
} from '@umbraco-cms/backoffice/modal';
import { UmbLitElement } from '@umbraco-cms/internal/lit-element';
import type { DocumentTreeItemResponseModel, EntityTreeItemResponseModel } from '@umbraco-cms/backoffice/backend-api';
@@ -118,7 +119,7 @@ export class UmbInputDocumentPickerElement extends FormControlMixin(UmbLitElemen
private _openPicker() {
// We send a shallow copy(good enough as its just an array of ids) of our this._selectedIds, as we don't want the modal to manipulate our data:
const modalHandler = this._modalContext?.open(UMB_DOCUMENT_PICKER_MODAL, {
const modalHandler = this._modalContext?.open(UMB_DOCUMENT_TYPE_PICKER_MODAL, {
multiple: this.max === 1 ? false : true,
selection: [...this._selectedIds],
});

103
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.element.ts
View File

@@ -1,103 +0,0 @@
import { css, html } from 'lit';
import { UUITextStyles } from '@umbraco-ui/uui-css/lib';
import { customElement, state } from 'lit/decorators.js';
import type { UmbTreeElement } from '../../../../core/components/tree/tree.element';
import { UmbDocumentTypePickerModalData, UmbDocumentTypePickerModalResult } from '@umbraco-cms/backoffice/modal';
import { UmbModalBaseElement } from '@umbraco-cms/internal/modal';
// TODO: make use of UmbPickerLayoutBase
@customElement('umb-document-type-picker-modal')
export class UmbDocumentTypePickerModalElement extends UmbModalBaseElement<
UmbDocumentTypePickerModalData,
UmbDocumentTypePickerModalResult
> {
@state()
_selection: Array<string | null> = [];
@state()
_multiple = true;
connectedCallback() {
super.connectedCallback();
this._selection = this.data?.selection ?? [];
this._multiple = this.data?.multiple ?? true;
}
private _handleSelectionChange(e: CustomEvent) {
e.stopPropagation();
const element = e.target as UmbTreeElement;
this._selection = element.selection;
}
private _submit() {
this.modalHandler?.submit({ selection: this._selection });
}
private _close() {
this.modalHandler?.reject();
}
render() {
return html`
<umb-workspace-editor headline="Select Content">
<uui-box>
<uui-input></uui-input>
<hr />
<umb-tree
alias="Umb.Tree.DocumentTypes"
@selected=${this._handleSelectionChange}
.selection=${this._selection}
selectable
?multiple=${this._multiple}></umb-tree>
</uui-box>
<div slot="actions">
<uui-button label="Close" @click=${this._close}></uui-button>
<uui-button label="Submit" look="primary" color="positive" @click=${this._submit}></uui-button>
</div>
</umb-workspace-editor>
`;
}
static styles = [
UUITextStyles,
css`
h3 {
margin-left: var(--uui-size-space-5);
margin-right: var(--uui-size-space-5);
}
uui-input {
width: 100%;
}
hr {
border: none;
border-bottom: 1px solid var(--uui-color-divider);
margin: 16px 0;
}
#content-list {
display: flex;
flex-direction: column;
gap: var(--uui-size-space-3);
}
.content-item {
cursor: pointer;
}
.content-item.selected {
background-color: var(--uui-color-selected);
color: var(--uui-color-selected-contrast);
}
`,
];
}
export default UmbDocumentTypePickerModalElement;
declare global {
interface HTMLElementTagNameMap {
'umb-document-type-picker-modal': UmbDocumentTypePickerModalElement;
}
}

26
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/document-type-picker/document-type-picker-modal.stories.ts
View File

@@ -1,26 +0,0 @@
import '../../../../core/components/body-layout/body-layout.element';
import './document-type-picker-modal.element';
import { Meta, Story } from '@storybook/web-components';
import { html } from 'lit';
import type { UmbDocumentTypePickerModalElement } from './document-type-picker-modal.element';
import type { UmbDocumentTypePickerModalData } from '@umbraco-cms/backoffice/modal';
export default {
title: 'API/Modals/Layouts/Content Picker',
component: 'umb-document-type-picker-modal',
id: 'umb-document-type-picker-modal',
} as Meta;
const data: UmbDocumentTypePickerModalData = {
multiple: true,
selection: [],
};
export const Overview: Story<UmbDocumentTypePickerModalElement> = () => html`
<!-- TODO: figure out if generics are allowed for properties:
https://github.com/runem/lit-analyzer/issues/149
https://github.com/runem/lit-analyzer/issues/163 -->
<umb-document-picker-modal .data=${data as any}></umb-document-picker-modal>
`;

6
src/Umbraco.Web.UI.Client/src/backoffice/documents/documents/modals/manifests.ts
View File

@@ -11,12 +11,6 @@ const modals: Array<ManifestModal> = [
treeAlias: DOCUMENT_TREE_ALIAS,
},
},
{
type: 'modal',
alias: 'Umb.Modal.DocumentTypePicker',
name: 'Document Type Picker Modal',
loader: () => import('./document-type-picker/document-type-picker-modal.element'),
},
];
export const manifests = [...modals];